1

如果我使用以下功能：

clusters.prototype.shop_iqns_selected_class = function() {
    if(this.viewport_width < 980) {
        $(this.iqns_class).each(function() {
            $(this.iqn).on('click', function() {
                if($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                } else {
                    $(this).addClass('selected');
                }
            });
        });
    }
}

要将属性添加到 clusters 函数，我知道使用this.viewport_width我指的是我this.viewport_width定义的父函数，但是当我使用 jQuery 选择器$(this)时，我指的是函数的父$.on()函数吗？

4

2 回答 2

2

不要this在整个代码中使用 all。像这样的方法$.each给你另一个参考：

$(".foo").each(function(index, element){
  /* 'element' is better to use than 'this'
     from here on out. Don't overwrite it. */
});

此外，$.on通过事件对象提供相同的功能：

$(".foo").on("click", function(event) {
  /* 'event.target' is better to use than
     'this' from here on out. */
});

当您的嵌套深入时，使用的歧义太多了this。当然，您会发现在积极使用的另一种方法是直接在回调中创建一个别名that，它等于this：

$(".foo").on("click", function(){
  var that = this;
  /* You can now refer to `that` as you nest,
     but be sure not to write over that var. */
});

我更喜欢在参数或事件对象中使用 jQuery 提供的值。

于 2012-05-13T08:10:06.023 回答
2

在 JavaScript 中，this完全由函数的调用方式定义。jQuery 的函数以设置每个元素值each的方式调用您给它的迭代器函数，因此在该迭代器函数中，不再引用它在该代码的其余部分中引用的内容。thisthis

这可以通过闭包上下文中的变量轻松修复：

clusters.prototype.shop_iqns_selected_class = function() {
    var self = this; // <=== The variable
    if(this.viewport_width < 980) {
        $(this.iqns_class).each(function() {
            // Do this *once*, you don't want to call $() repeatedly
            var $elm = $(this);

            // v---- using `self` to refer to the instance
            $(self.iqn).on('click', function() {
                // v---- using $elm
                if($elm.hasClass('selected')) {
                    $elm.removeClass('selected');
                } else {
                    $elm.addClass('selected');
                }
            });
        });
    }
}

我继续使用它this来引用每个 DOM 元素，但您可以接受迭代器函数的参数，这样就不会有歧义：

clusters.prototype.shop_iqns_selected_class = function() {
    var self = this; // <=== The variable
    if(this.viewport_width < 980) {
        // Accepting the args -----------v -----v
        $(this.iqns_class).each(function(index, elm) {
            // Do this *once*, you don't want to call $() repeatedly
            var $elm = $(elm);

            // v---- using `self` to refer to the instance
            $(self.iqn).on('click', function() {
                // v---- using $elm
                if($elm.hasClass('selected')) {
                    $elm.removeClass('selected');
                } else {
                    $elm.addClass('selected');
                }
            });
        });
    }
}

更多阅读（我的博客this中关于 JavaScript 的帖子）：

于 2012-05-13T08:14:18.550 回答