如何实现多行切换器点击时单独修改对应行的样式？

嘿，我明白你的困扰——点击一个切换器却让所有行一起变透明，确实挺闹心的，而且给每行加ID也太繁琐了。其实咱们完全可以利用DOM的层级关系来精准定位到点击的切换器对应的行，不用搞一堆ID。

核心思路 #

问题出在你之前的代码可能是直接选中了所有行元素，所以不管点哪个切换器，都会批量修改所有行的样式。咱们要做的是：点击切换器时，找到它所属的那一行，只修改这一行的样式。

具体实现方案 #

首先先准备好基础的HTML和CSS：

HTML结构（示例）

<div class="row-container">
  <div class="data-row">
    <span>这是第一行的数据内容</span>
    <button class="toggle-switch">切换</button>
  </div>
  <div class="data-row">
    <span>这是第二行的数据内容</span>
    <button class="toggle-switch">切换</button>
  </div>
  <!-- 更多行... -->
</div>

CSS样式

定义一个用来改变透明度的类，这样不用直接修改行的style属性，更符合最佳实践：

.faded-row {
  opacity: 0.4; /* 你可以自己调整透明度数值 */
}

JavaScript代码

这里有两种靠谱的写法，你可以根据自己的场景选：

写法1：给每个切换器绑定事件（适合静态渲染的行）

// 获取所有切换器按钮
const allToggles = document.querySelectorAll('.toggle-switch');

allToggles.forEach(toggle => {
  toggle.addEventListener('click', function() {
    // 找到当前切换器所属的最近的行元素
    const targetRow = this.closest('.data-row');
    // 切换faded-row类——有就去掉，没有就加上
    targetRow.classList.toggle('faded-row');
  });
});

写法2：事件委托（适合动态添加行的场景）

如果你的行是后来通过JS动态添加的，上面的写法可能对新行无效，这时候用事件委托更合适：

// 找到所有行的父容器
const rowContainer = document.querySelector('.row-container');

rowContainer.addEventListener('click', function(e) {
  // 判断点击的是不是切换器按钮
  if (e.target.classList.contains('toggle-switch')) {
    // 找到对应的行
    const targetRow = e.target.closest('.data-row');
    // 切换样式类
    targetRow.classList.toggle('faded-row');
  }
});

为什么这个方法好用？ #

• closest('.data-row')方法会从点击的切换器元素开始，向上查找最近的带有.data-row类的元素，不管切换器在row里的哪个位置，都能精准定位到对应的行。
• classList.toggle()可以一键切换样式状态，不用手动判断当前行是透明还是正常，代码更简洁。
• 不用给每行加唯一ID，维护起来轻松多了，动态添加的行也能自动生效（事件委托写法）。

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