点击不同ind类span元素始终获取ind0元素的问题求助

结合你的代码逻辑，点击任意按钮都输出ind0元素的核心原因及对应解决方案如下：

1. DOM容器复用导致页面仅保留最后一个元素 #

你循环中复用了同一个modalContent DOM元素，每次通过innerHTML覆盖内容后调用appendChild添加到页面。但appendChild的规则是：如果元素已存在于DOM树中，会将其从原位置移除并移动到新位置，而非复制。循环结束后，页面实际仅存在最后一次生成的modal（ind27），但由于所有modal使用position: fixed完全重叠，你点击的可能是底层未被覆盖的ind0按钮。

解决方式：每次循环创建新的容器元素，避免复用：

for (let i = 0; i < 28; i++) {
  // 每次循环新建独立容器
  const modalContent = document.createElement('div');
  modalContent.innerHTML = `
    <div class="modal">
      <div class="modal-content">
        <span class="close-button ind${i}" onclick="toggleModal1(this)">×</span>
        <p>Modal ${i}</p>
      </div>
    </div>
  `;
  document.body.appendChild(modalContent);
}

2. 事件监听器绑定逻辑错误 #

若你尝试逐个添加监听器时，出现了作用域错误或绑定对象错误，比如错误地将所有监听器绑定到第一个close-button元素：

• 错误示例（作用域问题）：

// 错误：var声明的i是函数级作用域，若逻辑错误会始终指向第一个元素
var buttons = document.querySelectorAll('.close-button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    console.log(buttons[0]); // 始终输出第一个元素
  });
}

解决方式：使用块级作用域变量，并正确引用当前点击元素：

const buttons = document.querySelectorAll('.close-button');
// 用let确保循环变量的块级作用域
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function(event) {
    console.log(event.target); // 输出当前点击的元素
  });
}
// 或用forEach更简洁
buttons.forEach(button => {
  button.addEventListener('click', (e) => console.log(e.target));
});

3. Modal叠加导致实际点击同一元素 #

所有modal使用position: fixed且未设置差异化z-index，会完全重叠。若ind0的modal在最上层（比如后续modal未递增z-index），点击任何位置的按钮实际都是点击ind0的按钮。

解决方式：给每个modal设置递增的z-index：

for (let i = 0; i < 28; i++) {
  const modalContent = document.createElement('div');
  modalContent.innerHTML = `
    <div class="modal" style="z-index: ${100 + i}">
      <div class="modal-content">
        <span class="close-button ind${i}" onclick="toggleModal1(this)">×</span>
        <p>Modal ${i}</p>
      </div>
    </div>
  `;
  document.body.appendChild(modalContent);
}

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