我一直在尝试通过将一本书中的一些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();
});
}
undefined error
当我运行它时,将返回一个。但是,我尝试用替换tabs[tabNumber].classList.add("active")
,this.classList.add("active")
并且它起作用了。
为什么先前的代码不起作用?据我所知,他们指的是同一件事,并且tabs[tabNumber]
应该起作用,因为此时代码就是tabs[0]
。
我猜还有其他答案告诉您为什么tabs[tabNumber]
不起作用(因为它来自for循环的得分,因此始终等于tabNumber的较大值)。
这就是为什么我建议使用.forEach
循环的原因。尽管要小心,因为它不适用于产生的DOM节点数组document.querySelectorAll()
,但是您可以使用:
// ES6
Array.from(document.querySelectorAll('...'))
// ES5
[].slice.call(document.querySelectorAll('...'))
无论如何,我为您的代码做了一个简化的工作演示。请注意,我将当前活动的选项卡保存在变量中,以防止再次for
循环。您也可以这样做:
document.querySelector('.active').classList.remove('active')
但是我喜欢减少DOM的读取量。
祝您学徒好运,将一些jQuery代码重写为Vanilla JS似乎是一个好方法,并且您可能会获得对JavaScript更好的理解。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句