如何將jQuery插件應用於同一頁面上的多個div？

Question

我正在使用jQuery插件，我需要它在一頁上的多個div上工作。 基本上，我有兩個菜單，當用戶單擊一個菜單項時，背景顏色會改變。 目前，效果已應用到兩個菜單，而不是單獨應用。 例如，如果我單擊菜單一的第一項，則背景發生變化，但是如果我單擊菜單二的第二項，則將刪除項一菜單一的背景，而項目二菜單二的背景發生了變化。

我需要菜單彼此完全分開。 單擊菜單一不應更改菜單二。 到目前為止，這是該插件的設置方式：

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

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/