javascript - 第一张图片显示弹出窗口，而不是其他图片

Question

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

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

<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>

我研究了 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>