jQuery несколько переменных для петель

Question

Это может быть просто, но просто не может понять это.

Давайте предположим, что я получил пятьдесят аналогичные функции, и есть два из них:

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 (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') выбирает элемент с идентификатором 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(); 
    } 
}