Селектор класса jQuery и событие щелчка, я что-то упустил?

Question

Я новичок в jQuery и его селекторах.

У меня много ссылок для переключения языка. Языки хранятся в переменной languages, а текущий индекс языка (называемый lang) хранится в document. Когда я нажимаю на одну ссылку, она меняется правильно (циклически перемещаясь по массиву), но любые другие ссылки остаются неизменными . Зачем? $('.lang') Селектор должен выбрать все мои ссылки ...

var languages = ['en', 'sl', 'at', 'de'];
$(document).data('lang', 0); // Just for the first page load

$('.lang').text(languages[($(document).data('lang'))])
    .attr('href', 'javascript:void(0)'); // Set href and text

$('.lang').click(function() {
    // Set link text to the current language and increment counter
    $(this).text(languages[(($(document).data('lang') + 1) % languages.length)]);
    $(document).data('lang', $(document).data('lang') + 1)
});

<a class="lang"></a>
<a class="lang"></a>

Answer 1

Это потому, что в функции щелчка вы ссылаетесь на this, т.е. вам нужна только текущая ссылка, на которую вы нажали

$('.lang').click(function() {
    // Set link text to the current language and increment counter
    $('.lang').text(languages[(($(document).data('lang') + 1) % languages.length)]);
    $(document).data('lang', $(document).data('lang') + 1)
});

как показано в этом jsfiddle

http://jsfiddle.net/WhtqR/

Вы правы в том, что $('.lang') выберет все ваши ссылки с этим классом. В вашем коде он применяет функцию щелчка к каждому из обработчиков ссылок. Но функция, которая запускается при нажатии, нуждалась в этом теге, а не this.