javascript - 多次使用 JavaScript 脚本

Question

我不相信以前有人问过这个问题。如果有，我很抱歉，因为我找不到它。

我有一个带有图片作为按钮的 HTML 表格:

<td>
  <button class="trigger">
    <img src="D:\Elly Research\ CO2858\Presentation\Calypso_map.jpg">
  </button>
</td>

<div class="modal">
  <div class="modal-content">
    <span class="close-button">&times; </span>
    <img src="D:\Elly Research\CO2858\Presentation\Calypso_map.jpg">
    <script src="D:\Elly Research\CO2858\Presentation\modal.js"></script>
  </div>
</div>

这是由脚本控制的:

var modal = document.querySelector(".modal");
var trigger = document.querySelector (".trigger");
var closeButton = document.querySelector(".close-button");

function toggleModal() {
  modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
  if(event.target === modal){
    toggleModal();
  }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

如果我复制第一张图片的格式并将其用于同一表格和同一页面中的第二张图片，它将停止工作。

JavaScript 是否不像 CSS 那样可以使用多个 ID 由一个 CSS 值控制？

这是我第一次将 JavaScript 与 HTML 和 CSS 结合使用。

Answer 1

当您执行 document.querySelector(".modal") 时，您选择的是第一个具有“modal”类的节点。在您的情况下，这将是包含第一张图片的 div。稍后您将 'click' 事件仅添加到第一张图片。

您可以使用 querySelectorAll，它返回所有匹配节点的列表并遍历所有节点以添加 'click' 事件监听器，如下所示:

const modals = document.querySelector(".modal");

modals.forEach(modal => {
    modal.addEventListener('click', toggleModal)
});