首页 > 一个页面相同的JS效果相同HTML结构,如何让一个JS函数分别使用2个地方,互不干扰

一个页面相同的JS效果相同HTML结构,如何让一个JS函数分别使用2个地方,互不干扰

html结构



<div class="member_tab"> <div class="member__shops"> <ul> <li> <p class="member__shops_pic"> <a href=""> <img src="image/pro_1.jpg" alt=" "/> </a> </p> <dl> <dd class="member__shops_name"> <a href="">完美滨纯-舒敏爽肤水</a> </dd> <dd class="member__shops_share"> <a href=""> <img src="image/tencent_blue2.png" alt=""/> </a> <a href=""> <img src="image/weibo_blue2.png" alt=""/> </a> <a href=""><img src="image/ship.png" alt=""/></a> <small>已发货</small> </dd> </dl> </li> <li> <p class="member__shops_pic"> <a href=""> <img src="image/pro_1.jpg" alt=" "/> </a> </p> <dl> <dd class="member__shops_name"> <a href="">完美滨纯-舒敏爽肤水</a> </dd> <dd class="member__shops_share"> <a href=""> <img src="image/tencent_blue2.png" alt=""/> </a> <a href=""> <img src="image/weibo_blue2.png" alt=""/> </a> <a href=""><img src="image/ship.png" alt=""/></a> <small>已发货</small> </dd> </dl> </li> <li> <p class="member__shops_pic"> <a href=""> <img src="image/pro_1.jpg" alt=" "/> </a> </p> <dl> <dd class="member__shops_name"> <a href="">完美滨纯-舒敏爽肤水</a> </dd> <dd class="member__shops_share"> <a href=""> <img src="image/tencent_blue2.png" alt=""/> </a> <a href=""> <img src="image/weibo_blue2.png" alt=""/> </a> <a href=""><img src="image/ship.png" alt=""/></a> <small>已发货</small> </dd> </dl> </li> </ul> </div> </div> <div class="member_tab" style="display: none"> <div class="member__shops"> <ul> <li> <p class="member__shops_pic"> <a href=""> <img src="image/tab.jpg" alt=" "/> </a> </p> <dl> <dd class="member__shops_name"> <a href="">满江红酸菜鱼</a> </dd> <dd class="member__shops_share"> <a href=""> <img src="image/tencent_blue2.png" alt=""/> </a> <a href=""> <img src="image/weibo_blue2.png" alt=""/> </a> <a href=""><img src="image/ship.png" alt=""/></a> <small>已发货</small> </dd> </dl> </li> <li> <p class="member__shops_pic"> <a href=""> <img src="image/tab.jpg" alt=" "/> </a> </p> <dl> <dd class="member__shops_name"> <a href="">满江红酸菜鱼</a> </dd> <dd class="member__shops_share"> <a href=""> <img src="image/tencent_blue2.png" alt=""/> </a> <a href=""> <img src="image/weibo_blue2.png" alt=""/> </a> <a href=""><img src="image/ship.png" alt=""/></a> <small>已发货</small> </dd> </dl> </li> <li> <p class="member__shops_pic"> <a href=""> <img src="image/tab.jpg" alt=" "/> </a> </p> <dl> <dd class="member__shops_name"> <a href="">满江红酸菜鱼</a> </dd> <dd class="member__shops_share"> <a href=""> <img src="image/tencent_blue2.png" alt=""/> </a> <a href=""> <img src="image/weibo_blue2.png" alt=""/> </a> <a href=""><img src="image/ship.png" alt=""/></a> <small>已发货</small> </dd> </dl> </li> </ul> </div> </div>

JS代码

 function __shop_list(){
        var __shop_li=$("#__shops_ul").find("li"),

            __shop_tab=$(".member_tab");
        __shop_li.each(function(i){
            $(this).attr({"index":i});

        });
        __shop_li.click(function(){

            __shop_li.removeClass("__shop_ul_select");
            $(this).addClass("__shop_ul_select");
            __shop_tab.css({"display":"none"});
            var obj=$(this).attr("index");
            __shop_tab.eq(obj).css({"display":"block"});
        })
    }

效果图


你这效果是 tab 切换效果吧,看到你里面使用了 jquery,怎么不直接用个 jquery 的 tab 插件实现呢?


来来来,哥教你怎么弄~~~

你妹的,在函数里添加一个参数,把模块元素ID OR CLASS 名传进去,就好了。

JS 这么玩

另外哪个白痴这么教你命名的? 回头给他一板砖~

__shop_list('#__shops_ul');
function __shop_list(eleName){
**var __shop_li=$(eleName).find("li"),**

        __shop_tab=$(".member_tab");
    __shop_li.each(function(i){
        $(this).attr({"index":i});

    });
    __shop_li.click(function(){

        __shop_li.removeClass("__shop_ul_select");
        $(this).addClass("__shop_ul_select");
        __shop_tab.css({"display":"none"});
        var obj=$(this).attr("index");
        __shop_tab.eq(obj).css({"display":"block"});
    })
}
【热门文章】
【热门文章】