在一個循環功能分配一個點擊的元素

Question

我進口的#parentEle兒童，使每一個的副本，並推動該複製對象數組新ID - #eleCopy(i)

我想還可以指派一個點擊函數導入原始對象。點擊它會改變其副本的CSS（從數組引用）。但受影響的副本始終是相同的 - 最後一個加載。我希望通過它的索引號在數組中引用它......如何在點擊函數中「凍結」正確的數組引用，這樣$(this) 0將對應於ar [0]，$（this）`1到ar [ 1]等等？

var ar = []; 
var i = 0; 

$('#parentEle').children().each(function() { 

     ... // copy of $(this) is created: $('#eleCopy'+i) 

     ar.push($('#eleCopy'+i)); 


     $(this).on('click', function() { 

      ar[i].css({ ... }); 

     }); 

     i++; 

}); 

Answer 1

請參閱這些問題對於這個問題的解釋：

• Assign click handlers in for loop
• JavaScript closure inside loops – simple practical example

在你的情況下，解決辦法很簡單：既然你已經使用.each ，沒有必要保留一個外部計數器。當前索引傳遞給回調作爲參數：

// method signature: each(function(index, Element)) 
$('#parentEle').children().each(function(i) { 
    ... // copy of $(this) is created: $('#eleCopy'+i) 
    ar.push($('#eleCopy'+i)); 

    $(this).on('click', function() { 
     ar[i].css({ ... }); 
    }); 
}); 

然而，問題是你是否甚至需要通過數組引用克隆。爲了訪問事件處理程序中的克隆，你可以參考它直接：

$('#parentEle').children().each(function(i) { 
    var $copy = ...; // copy of $(this) is created: $('#eleCopy'+i) 
    $(this).on('click', function() { 
     $copy.css({ ... }); 
    }); 
}); 

這工作，因爲你綁定的事件處理程序是關閉。

這兩種解決方案的一個缺點是，您在每次迭代中創建一個新的事件處理程序，即使它們都執行相同的操作。你可以利用jQuery的.data API存儲與原來的節點的參考克隆並綁定一個單一的事件處理程序的元素：

$('#parentEle').children().each(function(i) { 
    var $copy = ...; // copy of $(this) is created: $('#eleCopy'+i) 
    $(this).data('copy', $copy); 
}).on('click', function() { 
    $(this).data('copy').css({ ... }); 
}); 

Answer 2

爲什麼不：

$('#parentEle').find('[id^="eleCopy"]').each(function() { 
    $(this).css({ ... }); 
} 

each()

StartsWith

Answer 3

這是一個範圍問題。

當點擊事件發生，ar[i].css({ ... })執行，我已經已遞增的所有調用

i++; 

值，以便i等於#parentEle

孩子的數量在爲了具有所需的行爲行爲，將代碼封裝在閉包中：

替換

$(this).on('click', function() { 
    ar[i].css({ ... }); 
}); 

與

(function(i) { 
    $(this).on('click', function() { 
     ar[i].css({ ... }); 
    }); 
})(i); 

有關JavaScript的閉包的詳細信息，see this answer