Как упростить этот jQuery?

Question

У меня есть несколько HTML-страниц, содержащих список миниатюр различной величины (пикировка на 38 на одной странице), и я использую следующий jQuery для хранения атрибута ID из каждого из них при нажатии в переменной currPhoto :

$('#thumbnav a:nth-child(1)').click(function() { 
currPhoto = $('#0').attr('id'); 
}); 

$('#thumbnav a:nth-child(2)').click(function() { 
currPhoto = $('#1').attr('id'); 
}); 

$('#thumbnav a:nth-child(3)').click(function() { 
currPhoto = $('#2').attr('id'); 
}); 

$('#thumbnav a:nth-child(4)').click(function() { 
currPhoto = $('#3').attr('id'); 
}); 

$('#thumbnav a:nth-child(5)').click(function() { 
currPhoto = $('#4').attr('id'); 
}); 

... и т. Д., Продолжая еще 33 из них.

Я уверен, что должен быть способ упростить это в один блок кода, но я не испытываю при использовании jQuery, поэтому я не могу, чтобы жизнь меня определяла, что это может быть.

Answer 1

Поскольку вы смотрите на все в a элементы под #thumbnav, вам не нужны отдельные селекторы:

$('#thumbnav a').click(function() { 
    currPhoto = this.id; // `this` will be the clicked `a` element 
}); 

Answer 2

Простой способ будет с для цикла:

for(var i = 0 ; i < 33 ;i++) 
    { 
     $('#thumbnav a:nth-child(' + i + ')').click(function() { 
       currPhoto = $('#' + (i-1)).attr('id'); 
     }); 
    } 

Лучший способ будет помечать a «S с class и использовать его в качестве селектора:

<a class="cls">Content</a> 
    $('.cls').click(function() { 
      currPhoto = $(this).closest('.cls').attr('id'); 
    }); 

closest получает первый элемент, который соответствует селектору, тестируя сам элемент и проходя через своих предков в дереве DOM.

Answer 3

Вы должны связать только один случай на родителя вместо одного события для каждого звена особенно так как у вас так много на одной странице:

$('#thumbnav').on('click', 'a', function() { 
    currPhoto = $(this).attr('id'); 
}); 

Этот подход также позволяет динамически добавлять/удалять ссылки без привязки новых событий.