Question

我正在使用jQuery插件，我需要它在一个页面上处理多个div。基本上，我有两个菜单，当用户点击一个菜单项时，背景颜色会发生变化。现在，效果将应用于两个菜单而不是单独使用。例如，如果单击菜单1中的第一项，则背景会发生变化，但如果单击菜单2的第二项，则第一项菜单1的背景将被删除，而第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();

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

的jsfiddle示例

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');

Answer 2

function selectBox () { 

    $('.ms-section-select li').on('click', function(){
        $(this).siblings().removeClass('ms-checked');
        $(this).addClass('ms-checked');

    })
};

selectBox();

这应该做的 - 检查：http://jsfiddle.net/977hv/6/

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

2 个答案: