如何为关联的同级元素应用CSS样式变更？

问题根源 #

1. HTML里所有按钮用了重复的id="button"，ID在页面中必须唯一，这违反了HTML规范。
2. JS里用document.querySelector('.toast')只会返回页面中第一个匹配的.toast元素，所以不管点哪个按钮，都只会修改第一个Toast的样式。

方案一：直接传递点击按钮，定位对应Toast #

这种方式简单直接，适合静态页面：

修改后的HTML

<div class="parent">
  <button class="button" onclick="hide(this)">Button 1</button>
  <div class="toast">A box with text</div>
</div>
<div class="parent">
  <button class="button" onclick="hide(this)">Button 2</button>
  <div class="toast">A box with text</div>
</div>
<div class="parent">
  <button class="button" onclick="hide(this)">Etc...</button>
  <div class="toast">A box with text</div>
</div>

修改后的JS

function hide(btn) {
  // 通过点击的按钮找到父容器，再定位里面的Toast
  const targetToast = btn.parentElement.querySelector('.toast');
  // 切换display属性，也可以改成任意样式修改
  targetToast.style.display = targetToast.style.display === 'none' ? 'block' : 'none';
  
  // 示例：额外修改背景色（支持任意CSS样式）
  // targetToast.style.backgroundColor = targetToast.style.backgroundColor === 'black' ? 'darkgreen' : 'black';
}

修正后的CSS

.parent {
  position : relative;
  display : inline-block;
  height : 55px;
  margin-right: 10px; /* 加个间距避免重叠 */
}

button.button {
  width : 100px;
  height : 35px;
}

.toast {
  display : block;
  position : absolute;
  top : 40px;
  background-color : black;
  color: white; /* 加文字颜色方便查看 */
  padding: 6px 10px;
}

方案二：事件委托（更推荐，支持动态添加元素） #

不需要在HTML里写onclick，通过父容器统一绑定事件，后续动态新增的按钮也能生效：

修改后的HTML

<div class="button-container">
  <div class="parent">
    <button class="button">Button 1</button>
    <div class="toast">A box with text</div>
  </div>
  <div class="parent">
    <button class="button">Button 2</button>
    <div class="toast">A box with text</div>
  </div>
  <div class="parent">
    <button class="button">Etc...</button>
    <div class="toast">A box with text</div>
  </div>
</div>

修改后的JS

// 给父容器绑定点击事件
document.querySelector('.button-container').addEventListener('click', function(e) {
  // 判断点击的是按钮
  if (e.target.classList.contains('button')) {
    const targetToast = e.target.parentElement.querySelector('.toast');
    // 切换display属性，可替换为任意样式操作
    targetToast.style.display = targetToast.style.display === 'none' ? 'block' : 'none';
    
    // 示例：修改文字大小
    // targetToast.style.fontSize = targetToast.style.fontSize === '14px' ? '16px' : '14px';
  }
});

CSS和方案一保持一致即可。

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