如何將值傳遞給jQuery單擊回調？

Question

如果我像這樣在循環中創建一堆對象：

for(var i = 0; i < 5; i++)
{
    var data = { val: i * 2 };
    var obj = $('<li>Item</li>');

    $("ul").append(obj);

    obj.click(function()
    {
        alert(data.val);
        // Output is 8 for all items.

    });
}

我只能訪問.click()處理程序中最后創建的data對象。

如何在處理程序中引用相關的data對象-與單擊jQuery對象同時創建的data對象？

過去，我可以通過.attr()在jQuery對象上分配隨機屬性來保存數據（而不是單獨的對象.attr()來解決此問題，但我想擺脫這種方法。

我也嘗試過，但是沒有運氣：

var data = { val: i * 2 };
var obj = $('<li>Item</li>');

obj.data = data;

obj.click(function()
{
    // 'data' is undefined here i.e. not associated with $(this).
    alert($(this).data.val);

});

Answer 1

第一個示例的問題被變量的范圍所掩蓋。 在JS中，所有變量都具有函數作用域，因此重寫代碼以更明確地表明將導致：

var i,data,obj;
for(i = 0; i < 5; i++) {
    data = { val: i * 2 };
    obj = $('<li>Item</li>');

    $("ul").append(obj);
    obj.click(function() {
        alert(data.val);
    });
}

現在，更明顯的是，循環中的data對於每個迭代而言只是一個變量，而不是新的（如Java，C＃等）。 當單擊處理程序使用此變量時傳遞的匿名函數將關閉該變量。 結果是使用了函數執行時變量的當前值，而不是使用將函數分配為單擊處理程序時變量具有的值。

為了解決這個問題，您可以將數據附加到元素本身。

在您的代碼中執行obj.data = ...但是obj.data = ...值附加到所選內容而不是元素。 下次選擇同一元素時，您將擁有一個沒有data.property的新對象。 相反，您可以使用jQuery .data()方法。

obj.data('key',data);
obj.click(function() {
    alert($(this).data('key').val);
});

或者，如果您想將值嵌入到函數中，則可以使用自執行函數來實現。 當您將變量作為參數傳遞給函數時，您使用的是當前值，而不是覆蓋變量。

var i,
    data,
    obj,
    createClick = function(data) {
        return function(){
           alert(data.val);
        };
    };
for(i = 0; i < 5; i++) {
    data = { val: i * 2 };
    obj = $('<li>Item</li>');

    $("ul").append(obj);
    obj.click(createClick(data));
}

注意：順便說一句，您應該養成把{放在行尾而不是開頭的習慣。 如果{在下一行，則半冒號插入會產生一些意外結果。 例如

return 
    {
      val : 1
    }

可能返回undefined因為在return后可能會插入分號，而忽略對象文字

Answer 2

您可以使用jQuery .data（）方法。 http://api.jquery.com/data/

例如：

for(var i = 0; i < 5; i++){
    var obj = $('<li>Item</li>');
    obj.data('myData', {first: i * 2, second: i * 3});

    $("ul").append(obj);

    obj.click(function(){
        alert($(this).data('myData').first);
        alert($(this).data('myData').second);
    });
}