javascript - 在 Modal 弹出窗口中使用 span id 更改 li 类

Question

在我的 html 页面中，我有一个外部 javascript 代码，当单击我的 html 类中的项目时，会弹出一个模式。项目是通过li class属性指定的。我现在希望有这个机会，所以当点击 span id 元素时，模式会弹出。因此，我重新访问了 Javascript 代码，并将 li 类属性（在本例中为 .Project）更改为span id属性（#PopUp。不幸的是，我无法通过它使我的代码工作。有人能看到在哪里我走错了吗？

window.onload = function() {
  span = document.querySelectorAll("#PopUp");
  document.querySelectorAll("#PopUp").forEach(LIelm => {
    LIelm.addEventListener('click', showHideModal)
  })
};

function showHideModal(e) {
  if (!e.target.parentNode.matches('#PopUp , .modal-content')) return

  e.preventDefault();
  let currentParent = e.target.parentNode;

  if (currentParent.matches('#PopUp')) {
    document.getElementById(currentParent.dataset.modal).style.display = "block";
  } else {
    currentParent.parentNode.style.display = "";
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="content">
<div id="contact">
   <a href="">About</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact: [e-mail] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0045 &nbsp;7158&nbsp;0488
   <br>
   <br>
</div>
<ul style="list-style: none;">
<li class="Project" data-modal="myModal_1">
   <span id="myBtn_1">Irma Type</span>
   <span id="year">2019</span>
   <div class="Describtion">
      <span id="PopUp">Images</id>
      <p style="display:none;">Typedesign<br></p>
   </div>
   <div id="myModal_1" class="modal">
      <div class="modal-content">
         <div id="demo" class="carousel slide" data-ride="carousel">
            <!-- The slideshow -->
            <div class="carousel-inner">
               <div class="carousel-item active">    
                  <img src="Images/Lirma/type.jpg" alt="img" width="100%">
               </div>
               <!-- Left and right controls -->
               <a class="carousel-control-prev" href="#demo" data-slide="prev">
               <span class="carousel-control-prev-icon"></span>
               </a>
               <a class="carousel-control-next" href="#demo" data-slide="next">
               <span class="carousel-control-next-icon"></span>
               </a>
            </div>
            <p>Some text in the Modal...</p>
         </div>
      </div>
   </div>
</li>

标签： javascripthtmlpopupbootstrap-modal