for循環中的jQuery多個變量

Question

這可能是簡單的事情，但只是無法弄清楚。

假設我得了50種類似的功能，並有兩個：

var unit = ['red', 'pink'] 
var unit2 = ['red2', 'red2'] 

$('#red').click(function() { 
if($('#red2').is(':hidden')) { 
$('#red2').toggle(); 
} else { 
$('#red2').toggle();}}} 

和

$('#pink').click(function() { 
if($('#pink2').is(':hidden')) { 
$('#pink2').toggle(); 
} else { 
$('#pink').toggle();}}} 

，我想添加一個/兩個for循環的所有這些功能。 我嘗試這樣做：

for (var i = 0; i < unit.length; i++) { 
for (var y = 0; y < unit2.length; y++) { 
$('#i').click(function() { 
if($('#y').is(':hidden')) { 
$('#y').toggle(); 
} else { 
$('#y').toggle();}}}} 

Answer 1

.toggle()方法檢測元件本身的知名度，也沒有必要使用if語句，你可以使用this關鍵字是指到點擊的元素：

$('#red, #pink').on('click', function() { 
    // Based on the id property of the clicked element 
    // this selects #red2 or #pink2 element 
    $('#' + this.id + '2').toggle(); 
}); 

另外請注意，$('#i')選擇一個元素ID爲i，你應該連接字符串：

$('#' + i).foo(); 

Answer 2

你應該連接字符串：

for (var i = 0; i < unit.length; i++) { 
    $('#' + unit[i]) 
    .attr('data-dst', unit2[i]) 
    .click(function() { 
    var dst = $(this).attr('data-dst'); 
    $('#' + dst).toogle(); 
    } 
}