我有一个像这样的清单：
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
我需要将活动类分别添加到每个项目中，并在单击时将其删除到上一个项目中。
类似于此问题的Vanilla JS从先前的选择中删除了类，但是由于旧的浏览器兼容性，我需要使用For循环而不是ForEach。
我一直在尝试使该答案适合我的示例：
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
const item = items[i];
item.addEventListener("click", addActiveClass);
for (let i = 0; i < items.length; i++) {
const item = items[i];
item.addEventListener("click", removeClass);
}
}
function removeClass(e) {
e.target.classList.remove("active");
}
function addActiveClass(e) {
e.target.classList.add("active");
}
但是它仍然没有按预期工作:(
我假设您需要从其余项目中删除活动类，然后更新正确的项目。但是，我不确定classList您要支持的旧版浏览器是否可用。你应该考虑的填充工具为老年人bowsers。
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
const item = items[i];
item.addEventListener("click", changeActiveClass);
}
function changeActiveClass(e)
{
for (let i = 0; i < items.length; i++) {
const item = items[i];
item.classList.remove('active');
}
e.target.classList.add('active');
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句