如何用for循环给多个元素添加EventListener及解决样式异常

问题1：仅第一个元素点击后字体颜色不生效 #

原因 #

你给<li class="select">设置的color样式被内部<a>标签的默认样式覆盖了——浏览器会给<a>标签赋予默认的蓝色/紫色字体样式，优先级高于父元素的继承样式，所以字体颜色不会按预期生效。

修复代码 #

修改事件处理逻辑，同时给<li>和内部的<a>标签设置样式：

const category = document.querySelector(".select");

category.addEventListener("click", (e) => {
  e.preventDefault();
  // 设置li的背景与透明度
  category.style.background = "#eb3352";
  category.style.opacity = "0.7";
  // 定位内部a标签，单独设置字体颜色
  const link = category.querySelector("a");
  link.style.color = "#fcfafa";
});

问题2：for循环绑定事件完全无效果 #

原因 #

你用var i声明循环变量，var属于函数作用域，当点击事件触发时，循环已经执行完毕，i的值会变成categories.length，此时categories[i]是undefined，自然无法设置样式。

解决办法（三种可选） #

方法1：用let替代var（块级作用域绑定）

const categories = document.querySelectorAll(".select");

for (let i = 0; i < categories.length; i++){
  categories[i].addEventListener("click", (e) => {
    e.preventDefault();
    categories[i].style.background = "#eb3352";
    categories[i].style.opacity = "0.7";
    categories[i].querySelector("a").style.color = "#fcfafa";
  });
}

方法2：用forEach遍历元素集合

const categories = document.querySelectorAll(".select");

categories.forEach(item => {
  item.addEventListener("click", (e) => {
    e.preventDefault();
    item.style.background = "#eb3352";
    item.style.opacity = "0.7";
    item.querySelector("a").style.color = "#fcfafa";
  });
});

方法3：事件委托（更高效，支持动态添加元素）

不给每个元素单独绑定事件，直接给父元素绑定，通过事件冒泡定位目标元素：

const categoryBox = document.querySelector(".categorybox ul");

categoryBox.addEventListener("click", (e) => {
  e.preventDefault();
  // 精准定位点击的.select类li元素
  const targetLi = e.target.closest(".select");
  if (targetLi) {
    targetLi.style.background = "#eb3352";
    targetLi.style.opacity = "0.7";
    targetLi.querySelector("a").style.color = "#fcfafa";
  }
});

内容的提问来源于stack exchange，提问作者Nuray Ganb