如何为container类下深层嵌套的question类元素添加click事件监听器

你的代码存在两处核心错误：

• document.querySelectorAll() 返回的是 DOM 元素集合，你直接对整个集合绑定点击事件不会生效，需要遍历集合给每个元素单独绑定
• 循环变量i未声明为块级作用域变量，触发点击回调时循环已经执行完毕，i的值等于集合长度，此时通过colorChange[i]取元素会返回undefined，触发报错

修正后代码（JS部分） #

写法1：调整for循环逻辑 #

let colorChange = document.querySelectorAll(".container .dropdowns .dropdown-function .question")
// 用let声明i为块级作用域变量
for(let i = 0; i < colorChange.length; i++){
  // 给当前遍历到的单个元素绑定事件
  colorChange[i].addEventListener("click", function(){
    // 回调内this直接指向当前触发点击的元素，不需要用索引取值
    this.classList.add("change-color");
  });
}

写法2：更简洁的forEach遍历写法 #

document.querySelectorAll(".container .dropdowns .dropdown-function .question")
.forEach(questionEl => {
  questionEl.addEventListener("click", () => {
    questionEl.classList.add("change-color")
  })
})

效果说明 #

修改后点击对应问题标题，就会给该标题添加change-color类，文字变为绿色，和你写的CSS逻辑匹配，HTML部分不需要修改。

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