首页帖子图片点击弹窗异常：仅首张图片可触发弹窗

嘿，我来帮你搞定这个弹窗只触发第一张图片的问题！

你现在的代码里用了document.getElementById("myBtn")来获取触发弹窗的按钮，但HTML里ID是唯一标识，这个方法只会返回页面中第一个匹配该ID的元素——所以后面的帖子图片按钮虽然看着有同样的ID，但根本没被绑定点击事件，自然不会触发弹窗。

方案1：类选择器+循环绑定（适合静态渲染的帖子） #

先把所有帖子里的图片按钮的id="myBtn"改成class="myBtn"，然后通过类选择器拿到所有按钮，循环给每个按钮绑定弹窗触发逻辑：

var modal = document.getElementById('myModal');
// 拿到所有带myBtn类的按钮
var btns = document.getElementsByClassName("myBtn");
var span = document.getElementsByClassName("close")[0];

// 挨个给按钮加点击事件
for (let 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";
  }
}

方案2：事件委托（更适合动态加载的帖子） #

如果你的帖子是动态生成的（比如下拉加载更多、分页加载），用事件委托更高效——不用给每个按钮单独绑事件，直接把事件绑在它们的父容器上，靠事件冒泡来触发：

假设你的帖子列表的父容器有个类叫post-container，代码可以这么写：

var modal = document.getElementById('myModal');
var span = document.getElementsByClassName("close")[0];
// 拿到帖子列表的父容器
var postContainer = document.querySelector('.post-container');

// 给父容器加点击事件，判断点击的是不是我们的按钮
postContainer.addEventListener('click', function(e) {
  if (e.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";
  }
}

HTML规范里明确要求同一个页面里ID必须唯一，以后写代码可别重复用同一个ID啦，不然很容易出现这种“看起来代码没问题但就是不生效”的奇怪bug～

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