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。