JavaScript 如何实现元素集合点击时切换当前与其余项src属性

你原有代码的核心问题是事件回调里的ev[i]仅指向绑定事件时对应索引的单个元素，没有遍历整个元素集合重置所有项的状态，自然达不到单选切换的效果。另外注意：<p>标签本身不存在src属性，如果你是要操作图标元素，大概率选择器应该匹配.event下的<img>标签，可根据实际DOM结构自行调整。

const ev = document.querySelectorAll('.event p')

ev.forEach(item => {
  item.addEventListener('click', function(e) {
    // 第一步：先把所有元素的状态统一重置为未选中的warning图标
    ev.forEach(el => {
      el.src = './warning.png'
    })
    // 第二步：单独把当前点击的元素设置为选中的icon图标
    e.currentTarget.src = './icon.png'
  })
})

• 每次触发点击时，先遍历整个元素集合，把所有元素的src都设置为未选中状态对应的./warning.png，这一步会把之前点击选中过的元素状态全部重置
• 全量重置完成后，再单独修改当前点击元素的src为选中状态对应的./icon.png，就能实现互斥的单选切换效果
• 用forEach遍历比传统for循环写法更简洁，也不会出现闭包、索引指向异常之类的问题

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