如何将jQuery插件应用于同一页面上的多个div？

Question

我正在研究一个jQuery插件,我需要它在一个页面上处理多个div.基本上,我有两个菜单,当用户点击一个菜单项时,背景颜色会发生变化.现在,效果将应用于两个菜单而不是单独使用.例如,如果单击菜单1中的第一项,则背景会发生变化,但如果单击菜单2的第二项,则第2项菜单2的背景将被删除,而第2项菜单2的背景将更改.

我需要让菜单彼此完全分开.单击菜单1不应更改菜单2.以下是目前设置插件的方式:

(function ($) {
    $.fn.selectBox = function () {
        function get() {
            $('.ms-section-select li').first().addClass('ms-checked');
        }

        function get() {
            $('.ms-section-select li').click(function () {
                $('.ms-section-select li').removeClass('ms-checked');
                $(this).addClass('ms-checked');
            });
        }
        return this.each(get);
    };
})(jQuery);

$('.one').selectBox();
$('.two').selectBox();

这是一个包含所有代码的jsfiddle示例http://jsfiddle.net/977hv/

Answer 1

您可以尝试仅对所选元素的兄弟姐妹应用更改这是您要做的吗？ http://jsfiddle.net/977hv/8/

$(this).siblings('.ms-section-select li').removeClass('ms-checked');

将它应用于第一个孩子

    $('.ms-section-select li:first-child').addClass('ms-checked');