如何用JavaScript在foreach循环中通过getElementsByClassName实现多项目div类名切换

问题原因 #

你当前代码的问题有两个：

1. 仅给索引为[0]的第一个.read-more-div绑定了点击事件，其余同类元素没有绑定监听
2. 切换类时是全局查找.read-more-btn1和.read-more-btn2的第一个元素，不会对应到当前点击的父元素内部的子元素

修复后的JS代码 #

// 获取所有的read-more-div元素
const readMoreWraps = document.querySelectorAll('.read-more-div');
// 遍历每个容器绑定点击事件
readMoreWraps.forEach(wrap => {
  wrap.addEventListener('click', function() {
    // 查找当前点击容器内部的两个按钮切换类
    this.querySelector('.read-more-btn1').classList.toggle('hide');
    this.querySelector('.read-more-btn2').classList.toggle('hide');
    return false;
  })
})

实现逻辑说明 #

• 用querySelectorAll选中所有类名为read-more-div的容器，遍历后逐个绑定点击事件，解决只有第一个容器生效的问题
• 点击事件内部用this指代当前被点击的容器，再通过querySelector查找容器内部的子元素，保证类切换只会作用在当前点击的项目范围内，不会影响其他项目的元素

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