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

Question

html结构

<p class="member_tab">
         <p 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>
    </p>
    </p>


    <p class="member_tab" style="display: none">
        <p 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>
        </p>
    </p>

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"});
        })
    }

效果图

Answer 1

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

Answer 2

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

你妹的，在函数里添加一个参数，把模块元素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"});
    })
}