原型這個選擇

如果我使用下面的函數：原型這個選擇

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

要將屬性添加到集羣功能，我都知道，使用this.viewport_width我指的是在那裏我有this.viewport_width定義父功能，但是當我使用jQuery選擇器$(this)時，我指的是$.on()函數的父級？

來源

2012-05-13 Roland

在JavaScript中，this完全由定義，函數如何被稱爲。 jQuery的each函數調用你給它的迭代器函數，將this設置爲每個元素值，因此在該迭代器函數中，this不再引用它在該代碼的其餘部分引用的內容。

這是很容易固定在封閉的上下文中的變量：

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

更多閱讀（在我的博客中的JavaScript約this帖）：

雖然0

來源

2012-05-13 08:14:18

一個問題，將這個函數（上述）實例化所述'cluster'功能時自動運行？因爲如果符合'if（）'語句，我希望發生這種情況。 – Roland

@Roland：很高興幫助。當你做'var c = new cluster（）;'時，你得到的對象將被'cluster.prototype'對象支持。爲了調用'shop_iqns_selected_class'函數，你可以做'c.shop_iqns_selected_class（）;'（注意：JS中壓倒性的慣例是使用初始封裝的名字作爲構造函數，例如'Cluster'而不是'cluster'。） –

我明白了，我現在正在測試，這就是爲什麼變量可能沒有任何意義。但是如果沒有我單獨啓動它，沒有辦法讓這個功能運行。 – Roland

請勿在整個代碼中使用this。像$.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-13 08:10:06 Sampson

原型這個選擇

回答

相關問題