循环内CSS模态框触发按钮仅首次生效问题求助

嘿，这个问题我太熟了！核心原因很简单：HTML里的id属性必须是唯一的，你在循环里生成了多个带有id="myBtn"的按钮，但document.getElementById("myBtn")只会获取到DOM中第一个匹配这个id的元素，所以只有第一个按钮绑定了点击事件，后面的按钮自然没反应啦。

下面给你两种靠谱的解决方法：

方法一：事件委托（推荐，性能更优） #

事件委托利用了事件冒泡机制，只需要给父元素（甚至document）绑定一次事件，就能处理所有子元素的点击，特别适合循环生成的内容。

步骤1：修改PHP循环中的按钮，把id换成class #

while($query->have_posts()) : $query->the_post(){ 
<!-- some html here-->
<div class="pull-left hs-book-now-button">
<button class="myBtn">Book Now</button>
</div>
}

步骤2：更新JavaScript代码，使用事件委托 #

var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];

// 监听全局点击，判断是否点击了.myBtn按钮
document.addEventListener('click', function(event) {
  if (event.target.classList.contains('myBtn')) {
    modal.style.display = "block";
  }
});

// 关闭模态框的逻辑保持不变
span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

方法二：循环绑定事件（适合内容较少的场景） #

如果循环生成的按钮数量不多，也可以直接获取所有按钮元素，逐个绑定点击事件。

步骤1：同样先把按钮的id换成class（和方法一的PHP代码一致） #

步骤2：更新JavaScript代码 #

var modal = document.getElementById("myModal");
var btns = document.getElementsByClassName("myBtn");
var span = document.getElementsByClassName("close")[0];

// 遍历所有按钮，给每个按钮绑定点击事件
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = function() {
    modal.style.display = "block";
  }
}

// 关闭模态框的逻辑不变
span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

两种方法都能解决你的问题，个人更推荐事件委托，尤其是当循环生成的内容很多时，它能减少事件绑定的数量，提升页面性能。

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