点击列表项修改对应按钮文本？多组结构的ID关联实现方案

嘿，我明白你的困扰了——要让每组的Span只修改自己组里的Button文本，用ID关联是个很稳妥的方案，咱们一步步来实现：

第一步：给HTML结构添加关联标识 #

首先，我们要给每个Button设置唯一的ID，然后给对应组里的每个Span添加一个data-button-id属性，值就是该组Button的ID。这样每个Span就明确知道自己要对应哪个Button了，示例如下：

<!-- 第一组 -->
<button class="switcher collapsible" id="switcher-group1">X1</button>
<div class="collapsibleContent">
  <span class="choise__block-item" data-button-id="switcher-group1">Text</span>
  <span class="choise__block-item" data-button-id="switcher-group1">Text2</span>
</div>

<!-- 第二组 -->
<button class="switcher collapsible" id="switcher-group2">X2</button>
<div class="collapsibleContent">
  <span class="choise__block-item" data-button-id="switcher-group2">Text3</span>
  <span class="choise__block-item" data-button-id="switcher-group2">Text4</span>
</div>

第二步：编写JavaScript逻辑 #

接下来，我们给所有的choise__block-item类元素绑定点击事件，点击时通过data-button-id找到对应的Button，然后修改它的文本内容：

// 获取所有的span项
const spanItems = document.querySelectorAll('.choise__block-item');

// 给每个span绑定点击事件
spanItems.forEach(item => {
  item.addEventListener('click', function() {
    // 获取当前span对应的button ID
    const targetButtonId = this.getAttribute('data-button-id');
    // 找到对应的button元素
    const targetButton = document.getElementById(targetButtonId);
    // 修改button的文本为当前span的文本
    if (targetButton) {
      targetButton.textContent = this.textContent;
    }
  });
});

额外优化：动态元素适配方案 #

如果你的页面是动态生成这些组（比如后端渲染或JS动态添加元素），可以用事件委托来优化代码，不用给每个Span单独绑定事件：

// 事件委托版本，支持动态生成的元素
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('choise__block-item')) {
    const targetButtonId = e.target.getAttribute('data-button-id');
    const targetButton = document.getElementById(targetButtonId);
    if (targetButton) {
      targetButton.textContent = e.target.textContent;
    }
  }
});

这个方案的好处很明显：每个Span通过data-button-id和Button的ID建立唯一关联，不会出现误修改其他组按钮的情况；不管元素是静态还是动态生成的，都能正常工作，后续新增组也只需要维护ID和属性的对应关系即可。

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