JavaScript 中的 for loop vs forEach -- 书中的示例

for loop vs forEach in JavaScript -- example from book

本文关键字：forEach 中的 for loop vs JavaScript      更新时间：2023-09-26

我目前正在使用 O'Reilly 的"Learning Web Application Development"学习 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 总是将选项卡的最后一个元素传递给事件侦听器？

看起来这里有一个问题：

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

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

应该改成这样，我相信：

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

在for循环解决方案中，您多次设置tabSelector，如下所示：

var tabSelector = ".tabs a:nth-child("+tabNumber+") span";

最后，此选择器将设置为最后一个 tabNumber，当您引用它时

，将始终调用该选项卡： 
$(tabSelector).addClass("active");

为避免这种情况，请将其替换为 this ，对于它们中的每一个来说，这将有所不同：

$(this).addClass("active");

JS小提琴演示

相关文章：