如何实现数组元素对应Read more按钮独立切换（避免批量触发）

场景还原 #

现有数据数组：

const arr = [
  {
    id:1,
    img:'img url',
    title: 'title text',
    description: 'some text'
  },
  {
    id:2,
    img:'img url',
    title: 'title text',
    description: 'some text'
  },
  {
    id:3,
    img:'img url',
    title: 'title text',
    description: 'some text'
  }
]

生成的DOM结构：

<div class="big_container">
   <div class="image_container">
      <img src=""/>
   </div>
   <div class="description_container">
       <h4></h4>
       <p class="text">${item.description}</p>
       <button id="${item.id}" class="read-more-btn">Read more</button> 
   </div>
</div>

原事件绑定代码：

const btns = document.querySelectorAll('.read-more-btn')
for (i of btns) {
  i.addEventListener('click', function() {
    const container = document.querySelectorAll('.description_container')
    container.forEach((i, index) => console.log(i))
  });
} 

CSS样式：

/* read more */
.read-more-btn::before {
    content: 'read more';
}

.description_container.active  .read-more-btn::before {
    content:'show less'
}

.description_container.active p {
    display: block;
}

问题原因 #

点击按钮时，代码通过document.querySelectorAll('.description_container')获取了页面上所有的描述容器，后续操作会作用于全部容器，导致所有元素同时触发切换效果。

解决方案 #

1. 修改事件绑定逻辑，仅操作当前按钮对应的容器 #

点击按钮时，通过this（当前触发事件的按钮）找到其父级的.description_container，只对这个容器进行类名切换：

const btns = document.querySelectorAll('.read-more-btn')
for (const btn of btns) {
  btn.addEventListener('click', function() {
    // 找到当前按钮所在的描述容器
    const container = this.closest('.description_container');
    // 切换active类
    container.classList.toggle('active');
  });
}

注：closest()方法会向上查找最近的匹配父元素，比parentElement更灵活，即使DOM结构微调也能适配。

2. 补充默认隐藏描述文本的CSS #

原CSS中缺少默认状态下描述文本的隐藏规则，需要添加：

.description_container p.text {
    display: none;
}

这样初始状态下描述文本是隐藏的，点击按钮切换active类后才会显示。

优化后的完整CSS #

/* read more */
.read-more-btn::before {
    content: 'read more';
}

.description_container.active .read-more-btn::before {
    content:'show less';
}

.description_container p.text {
    display: none;
}

.description_container.active p.text {
    display: block;
}

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