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那样工作，在CSS中我可以使用多个ID来控制一个CSS值？

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

Answer 1

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

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

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

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

Answer 2

如果它是一个小型应用程序，一个简单的解决方案可能是创建一个包含其细节的图像对象，如下所示： dispatch_after()

然后，您可以遍历该表以生成表，或者仅使用ID引用创建表，例如//Here you can add as many properties you want for the objects images = [{ src: "D:\Elly Research\CO2858\Presentation\Calypso_map.jpg" }, { src: "D:\Elly Research\CO2858\Presentation\Calypso_map_alternative.jpg" }]，因此您可以使用以下代码在事件对象数组索引中访问它们：

<button id="0" class="trigger">

因此，要在模态内部生成img元素，您将具有以下内容： var id = event.target.id

但是请确保在已有img元素时销毁它：

function toggleModal(event){
        var id = event.target.id;
        var div = document.getElementsByClassName('modal-content')[0];
        div.innerHTML += '<img class="modal-image" src="'+images[id].src+'" />'; 
        modal.classList.toggle("show-modal");
    }

希望对您有帮助！！祝你学习顺利！

Answer 3

我不确定您到底想问什么。根据我的假设，这是一个小片段。希望对您有帮助。

var modal = document.getElementById("modal")
window.addEventListener("click", windowOnClick);
document.querySelector(".close-button").addEventListener("click", toggleModal)

function showImage(event){
 toggleModal()
  modal.getElementsByTagName("img")[0].src =event.srcElement.src
}

function windowOnClick(event){
  if(event.srcElement === modal){
    toggleModal()
  }
}

function toggleModal(){
  modal.classList.toggle("show-modal")
}

td > img{
  width: 100px;
  height: auto;
}

.modal{
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index=10;
}

.show-modal{
  display: block !important;
}

.modal-content{
  width: 60%;
  height: auto;
  margin: 0 auto;
}

.close-button{
  color: white;
  cursor: pointer;
}

#viewer{
  width:100%;
  height: auto;
}

<!doctype>
<html>
  <head>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <img src="https://i.imgur.com/GV6086A.jpg" onclick="showImage(event)" />
        </td>
        <td>
          <img src="https://i.imgur.com/opERcp1.jpg" onclick="showImage(event)" />
        </td>
      </tr>
      <tr>
        <td>
          <img src="https://i.imgur.com/lieUEvQ.jpg" onclick="showImage(event)" />
        </td>
        <td>
          <img src="https://i.imgur.com/B63gaEQ.jpg" onclick="showImage(event)" />
        </td>
      </tr>
      
    </table>
    <div class="modal" id="modal">
      <div class="modal-content">
       <span class="close-button">&times; </span>
        <img id="viewer">
      </div>
    </div>
  </body>
</html>

Answer 4

您可以多次使用js。检查图像的src。这里已经讨论过了-src absolute path problem。

多次使用JavaScript脚本

4 个答案: