我一直在尝试通过将书中的一些
Jquery示例重构为javascript来学习javascript.在下面的代码中,我向选项卡添加了一个单击侦听器,并在用户单击选项卡时将其更改为活动状态.
var tabs = document.querySelectorAll(".tabs a span");
var content = document.querySelectorAll("main .content li");
for (var tabNumber = 0; tabNumber <= 2; tabNumber++) {
tabs[tabNumber].addEventListener("click",function (event) {
for (var i = 0; i < tabs.length; i++) {
tabs[i].classList.remove("active");
}
tabs[tabNumber].classList.add("active");
for (var i = 0; i < content.length; i++) {
content[i].innerHTML = "";
}
event.preventDefault();
});
}
这在运行时返回一个未定义的错误.但是,我尝试用this.classList.add(“active”)替换tabs [tabNumber] .classList.add(“active”)并且它有效.
为什么以前的代码不起作用？据我所知,他们指的是同一个东西,而tab [tabNumber]应该可以工作,因为在代码中它是tabs [0].
解决方法
我猜其他答案告诉你为什么标签[tabNumber]不起作用(因为它来自for循环的分数,因此,总是等于tabNumber的较大值).
这就是为什么我建议使用.forEach循环.但是要小心,因为它不适用于document.querySelectorAll()生成的DOM节点数组,但您可以使用：
// ES6
Array.from(document.querySelectorAll('...'))
// ES5
[].slice.call(document.querySelectorAll('...'))
无论如何,我做了一个简化的working demo代码.
请注意,我将当前活动的选项卡保存在变量中,以防止另一个for循环.你也可以这样做：
document.querySelector('.active').classList.remove('active')
但我喜欢减少DOM读取量.
祝你的apprentissage好运,将一些jQuery代码重写到Vanilla JS中似乎是一个很好的方法,你可能会对JavaScript有更好的理解.
