javascript - JavaScript 中的 for 循环与 forEach —— 书中的示例

Question

我目前正在使用 O'Reilly 的“学习 Web 应用程序开发”学习 JavaScript。在示例中，我们正在使用 HTML 和 CSS 构建一个网站，其中包括 3 个选项卡，这些选项卡应该能够被选择并成为“事件”选项卡。书籍声称以下两种编写选项卡代码的方法是等效的:

1)

var main = function() {
    "use strict";
    var tabNumber;
    for (tabNumber=1;tabNumber<=3;tabNumber++) {
        var tabSelector = ".tabs a:nth-child("+tabNumber+") span";
        $(tabSelector).on("click",function() {
           $(".tabs span").removeClass("active");
           $(tabSelector).addClass("active");
           $("main .content").empty();
           return false;
        });
    }  
}
$(document).ready(main);

2)

var main = function() {
    "use strict";
    $(".tabs a span").toArray().forEach(function(element) {

        $(element).on("click", function() {
            console.print("this element: " + element);
            $(".tabs span").removeClass("active");
            $(element).addClass("active");
            $("main .content").empty();
            return false;
        });
    });
}
$(document).ready(main);

但是，它们输出的结果并不相同。使用 forEach 的版本工作正常，因此当我单击其中一个选项卡时，注意力会移至该选项卡并突出显示。但是，在使用 for 循环的版本中，每当我单击任何选项卡时，注意力总是移至最后一个选项卡。为了确认发生了什么，我使用这两种方法打印出了事件监听器内元素的名称，总共使用了 3 个选项卡。使用 for 循环，无论我单击哪个选项卡，我都会得到响应

"this element: .tabs a:nth-child(3) span"

有人可以帮我解释一下为什么会发生这种情况吗？为什么使用 for 或 forEach 的输出不同？为什么使用 for 时，它总是将 tabs 的最后一个元素传递给事件监听器？

Answer 1

看起来这里有问题:

var tabSelector = ".tabs a:nth-child("+tabNumber+") span";
$tabSelector.on("click",function(){

您创建的变量没有 $在开始时，然后将事件附加到一个变量(不确定它会引用什么) $在开始时。

我认为应该改为这样:

$(tabSelector).on("click",function(){