Javascript 将jqueryif语句限制在各自的div中

我有一个简单的jquery插件，我在两个不同的div上调用它。该插件包含一个if语句，结果将应用于两个div，而不是用户与之交互的实际div。这是我的插件：

(function ($) {
    $.fn.selectBox = function () {
        $(this).find('.ms-section-select li:first-child').addClass('ms-checked');


        function get() {
            $('.ms-section-select li').click(function (event) {

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


                if ($('.ms-new-select').hasClass('ms-checked')) {
                    $('.new-box').show();
                    $('.used-box, .all-box').hide();
                }

                if ($('.ms-used-select').hasClass('ms-checked')) {
                    $('.used-box').show();
                    $('.new-box, .all-box').hide();
                }

                if ($('.ms-all-select').hasClass('ms-checked')) {
                    $('.all-box').show();
                    $('.used-box, .new-box').hide();
                }

            });
        }

        return this.each(get);
    };
})(jQuery);

下面是带有html/css/js的JSFIDLE

---

我尝试在if语句中使用$（this）.find（…），$（this）.next（…）和其他几个解决方案，但我不知道如何将这两个div彼此分开。

您需要引用当前的jquery实例。请看固定版本：

$.fn.selectBox = function () {

    // Current box reference 
    var $this = $(this);

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

    function get() {
        $('.ms-section-select li', this).click(function (event) {

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

            if ($('.ms-new-select', $this).hasClass('ms-checked')) {
                $('.new-box', $this).show();
                $('.used-box, .all-box', $this).hide();
            }

            if ($('.ms-used-select', $this).hasClass('ms-checked')) {
                $('.used-box', $this).show();
                $('.new-box, .all-box', $this).hide();
            }

            if ($('.ms-all-select', $this).hasClass('ms-checked')) {
                $('.all-box', $this).show();
                $('.used-box, .new-box', $this).hide();
            }

        });
    }

    return this.each(get);
};

然后您应该在当前框中搜索

.ms new select

，

$this

：

if ($('.ms-new-select', $this).hasClass('ms-checked')) {
    $('.new-box', $this).show();
    $('.used-box, .all-box', $this).hide();
}

function ($) {
  $.fn.selectBox = function () {
    $(this).find('.ms-section-select li:first-child').addClass('ms-checked');
    var that = this; //save your this to a different variable, that

    function get() {
        $('.ms-section-select li').click(function (event) {
            //this is now the .ms-section-select li element
            $(this).siblings('.ms-section-select li').removeClass('ms-checked');
            $(this).addClass('ms-checked');

            //but we can still use that
            if ($(that).find('.ms-new-select').hasClass('ms-checked')) {

演示：您正在“丢失”对该

的原始引用：

if ($('.ms-new-select', $this).hasClass('ms-checked')) {
    $('.new-box', $this).show();
    $('.used-box, .all-box', $this).hide();
}

function ($) {
  $.fn.selectBox = function () {
    $(this).find('.ms-section-select li:first-child').addClass('ms-checked');
    var that = this; //save your this to a different variable, that

    function get() {
        $('.ms-section-select li').click(function (event) {
            //this is now the .ms-section-select li element
            $(this).siblings('.ms-section-select li').removeClass('ms-checked');
            $(this).addClass('ms-checked');

            //but we can still use that
            if ($(that).find('.ms-new-select').hasClass('ms-checked')) {

jsfiddle.net/977hv/17
让我看看我是否理解。（this）不能在if语句中使用，但可以在变量中使用，因此您只需将其分配给变量“that”，然后在if语句中使用“that”？否，在
$（'.ms section select li'）的内部。单击（函数（事件）{
，变量
this
指的是
.ms部分select li
元素。我们需要原始
this
元素，因此我们将其命名为其他元素，然后使用它。哦，好的，我知道了，谢谢。如果您想添加它作为答案，我将接受它。