javascript

当前位置:首页 > 前端 > javascript

封装渲染函数

左侧切换右侧数据
<div class="map-con flex2 j-space-between wrap">
                <div class="mp-left">

                    <div class="branch-map-l">
                        <div class="map">
                            <span class="map-dot beijing" data-id="beijing" value="北京" data1="36套" data2="1套" data3="1套" data4="1套">北京<i></i></span>
                            <span class="map-dot tianjin" data-id="tianjin" value="天津" data1="32套" data2="2套" data3="2套" data4="2套">天津<i></i></span>
                            <span class="map-dot hebei" data-id="hebei" value="河北" data1="32套" data2="2套" data3="2套" data4="2套">河北<i></i></span>
                            <span class="map-dot shanxi" data-id="shanxi" value="山西" data1="32套" data2="2套" data3="2套" data4="2套">山西<i></i></span>
                            <span class="map-dot liaoning" data-id="liaoning" value="辽宁" data1="32套" data2="2套" data3="2套" data4="2套">辽宁<i></i></span>
                            <span class="map-dot jilin" data-id="jilin" value="吉林" data1="32套" data2="2套" data3="2套" data4="2套">吉林<i></i></span>
                            <span class="map-dot heilongjiang" data-id="heilongjiang" value="黑龙江" data1="32套" data2="2套" data3="2套" data4="2套">黑龙江<i></i></span>
                            <span class="map-dot shanghai cur" data-id="shanghai" value="上海" data1="32套" data2="2套" data3="2套" data4="2套">上海<i></i></span>
                            <span class="map-dot jiangsu" data-id="jiangsu" value="江苏" data1="32套" data2="2套" data3="2套" data4="2套">江苏<i></i></span>
                            <span class="map-dot zhejiang" data-id="zhejiang" value="浙江" data1="32套" data2="2套" data3="2套" data4="2套">浙江<i></i></span>
                            <span class="map-dot anhui" data-id="anhui" value="安徽" data1="32套" data2="2套" data3="2套" data4="2套">安徽<i></i></span>
                            <span class="map-dot fujian" data-id="fujian" value="福建" data1="32套" data2="2套" data3="2套" data4="2套">福建<i></i></span>
                            <span class="map-dot jiangxi" data-id="jiangxi" value="江西" data1="32套" data2="2套" data3="2套" data4="2套">江西<i></i></span>
                            <span class="map-dot shandong" data-id="shandong" value="山东" data1="32套" data2="2套" data3="2套" data4="2套">山东<i></i></span>
                            <span class="map-dot henan" data-id="henan" value="河南" data1="32套" data2="2套" data3="2套" data4="2套">河南<i></i></span>
                            <span class="map-dot hubei" data-id="hubei" value="湖北" data1="32套" data2="2套" data3="2套" data4="2套">湖北<i></i></span>
                            <span class="map-dot hunan" data-id="hunan" value="湖南" data1="32套" data2="2套" data3="2套" data4="2套">湖南<i></i></span>
                            <span class="map-dot guangdong" data-id="guangdong" value="广东" data1="32套" data2="2套" data3="2套" data4="2套">广东<i></i></span>
                            <span class="map-dot guangxi" data-id="guangxi" value="广西" data1="32套" data2="2套" data3="2套" data4="2套">广西<i></i></span>
                            <span class="map-dot chongqing" data-id="chongqing" value="重庆" data1="32套" data2="2套" data3="2套" data4="2套">重庆<i></i></span>
                            <span class="map-dot sichuan" data-id="sichuan" value="四川" data1="32套" data2="2套" data3="2套" data4="2套">四川<i></i></span>
                            <span class="map-dot guizhou" data-id="guizhou" value="贵州" data1="32套" data2="2套" data3="2套" data4="2套">贵州<i></i></span>
                            <span class="map-dot yunnan" data-id="yunnan" value="云南" data1="32套" data2="2套" data3="2套" data4="2套">云南<i></i></span>
                            <span class="map-dot shanxi1" data-id="shanxi1" value="陕西" data1="32套" data2="2套" data3="2套" data4="2套">陕西<i></i></span>
                            <span class="map-dot tanwan" data-id="tanwan" value="台湾" data1="32套" data2="2套" data3="2套" data4="2套">台湾<i></i></span>
                            <span class="map-dot xinjiang" data-id="xinjiang" value="新疆" data1="32套" data2="2套" data3="2套" data4="2套">新疆<i></i></span>
                            <span class="map-dot xizang" data-id="xizang" value="西藏" data1="32套" data2="2套" data3="2套" data4="2套">西藏<i></i></span>
                            <span class="map-dot qinghai" data-id="qinghai" value="青海" data1="32套" data2="2套" data3="2套" data4="2套">青海<i></i></span>
                            <span class="map-dot ningxia" data-id="ningxia" value="宁夏" data1="32套" data2="2套" data3="2套" data4="2套">宁夏<i></i></span>
                            <span class="map-dot hainan" data-id="hainan" value="海南" data1="32套" data2="2套" data3="2套" data4="2套">海南<i></i></span>
                            <span class="map-dot gansu" data-id="gansu" value="甘肃" data1="32套" data2="2套" data3="2套" data4="2套">甘肃<i></i></span>
                            <span class="map-dot neimenggu" data-id="neimenggu" value="内蒙古" data1="32套" data2="2套" data3="2套" data4="2套">内蒙古<i></i></span>
                        </div>
                    </div>

                </div>
                <div class="mp-right">
                    <div class="jianshu">专业管理客户体系 客户分布全国各地</div>
                    <div class="neiron">
                        <h2 class="data0">甘肃</h2>
                        <div class="hgg">
                            <h4>医疗废物处理系统</h4>
                            <span>高温蒸汽灭菌系统<b class="data1">36套</b></span>
                            <span>应急车载处理系统<b class="data2">1套</b></span>
                        </div>
                        <div class="hgg">
                            <h4>医用中心供气系统</h4>
                            <span>医用中心供气系统<b class="data3">1套</b></span>
                            <span>医用分子筛制氧机<b class="data4">1套</b></span>
                        </div>
                    </div>
                </div>
            </div>
            
            
<script>
        $(function() {
            // 封装渲染函数
            function updateData($el) {
                var name = $el.attr("value") || "";
                var d1 = $el.attr("data1") || "—";
                var d2 = $el.attr("data2") || "—";
                var d3 = $el.attr("data3") || "—";
                var d4 = $el.attr("data4") || "—";

                $(".data0").text(name);
                $(".data1").text(d1);
                $(".data2").text(d2);
                $(".data3").text(d3);
                $(".data4").text(d4);
            }

            // 默认渲染 .beijing 的数据
            updateData($(".map-dot.beijing"));

            // 绑定鼠标移入事件
            $(".map-dot").on("mouseenter", function() {
                updateData($(this));
            });
        });
</script>


上一篇:swiper 分页滚动条 加载条

下一篇:已经是最后一篇

相关内容

文章评论

表情

共 0 条评论,查看全部
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~