Question

我正在尝试一个小小提琴，我注意到在for循环条件中调用一个函数正在停止循环。基本上，最初我想这样做：

// add event listeners to tabs
for (i=0;i<tabs.length;i++) {
    tabs[i].addEventListener('click', function(event) {
        var tab = event.target;
        selectPage(tab.dataset.tab);
        changeTab(tab);
    });
    if (tabs[i].classList.contains('active')) {
        selectPage(tabs[i].dataset.tab);
    }
}

但是，最终不得不这样做才能使它发挥作用：

// add event listeners to tabs
for (i=0;i<tabs.length;i++) {
    tabs[i].addEventListener('click', function(event) {
        var tab = event.target;
        selectPage(tab.dataset.tab);
        changeTab(tab);
    });
}
// find active class and set page
for (i=0;i<tabs.length;i++) {
  if (tabs[i].classList.contains('active')) {
     selectPage(tabs[i].dataset.tab);
  }
}

以下是Fiddle

的链接

感谢您提前提供任何帮助，我觉得这里有一些基本的东西，我没有得到。感谢

Answer 1

第0课：使用ESLint或类似工具检查代码是否存在琐碎错误，然后再在SO和/或调试工具中度过不眠之夜。

第1课：本地化变量。

您的问题是变量i是全局的 - 因此您的全局代码和selectPage函数都会重复使用它。后者将其值设置为tabs.length，过早地结束循环。

只需在每个i = 0表达式上将var i = 0替换为for。

Answer 2

尝试使用let。

声明x变量

// add event listeners to tabs
for (let i=0;i<tabs.length;i++) {
    tabs[i].addEventListener('click', function(event) {
    var tab = event.target;
    selectPage(tab.dataset.tab);
    changeTab(tab);
  });
  if (tabs[i].classList.contains('active')) {
    selectPage(tabs[i].dataset.tab);
  }
}

for循环内的函数调用打破了循环

2 个答案: