第一个图像显示弹出窗口，而不是其他图像

Question

我在主页上列出帖子。每个帖子都附有图片。当有人点击图像时，会弹出一条消息。第一张图片效果很好，但其他图片没有。

＆＃13;

＆＃13;

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

btn.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";
  }
}

＆＃13;

<div id="myBtn" class="text">
  <p>get access</p>
</div>
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Please login</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我研究过StackOverflow，并了解到在HTML中没有相同的名称ID元素。我不知道如何实施正确的代码。

Answer 1

您可以使用querySelectorAll获取与该选择器匹配的多个元素。

您可以使用有效的选择器，包括id，标签名称，属性，类等。

你得到一个DOM元素数组，所以你需要使用forEach来设置每个按钮。

var modal = document.getElementById('myModal');
var btns = document.querySelectorAll('.access-btn');
var span = document.getElementsByClassName("close")[0];

btns.forEach((btn) => {
  btn.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";
  }
}

.access-btn {
  cursor: pointer;
  text-transform: uppercase;
}

.modal {
  background: grey;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  position: relative;
}

.close {
  cursor: pointer;
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Please login</p>
  </div>
</div>

<button id="myBtn" class="text access-btn">
  <p>get access</p>
</button>

<button id="myBtn" class="text access-btn">
  <p>2nd access</p>
</button>

<button id="myBtn" class="text access-btn">
  <p>3rd access</p>
</button>