Изменение класса li с идентификатором span во всплывающем окне Modal - PullRequest
Новая
       45

Изменение класса li с идентификатором span во всплывающем окне Modal

0 голосов
/ 26 февраля 2020

На моей странице html есть внешний код javascript, который вызывает модальное всплывающее окно при щелчке по проекту в моем классе html. проекты указываются через атрибут li class. Теперь я могу sh сделать это, поэтому вместо щелчка по элементу span id появляется модальное окно. Поэтому я повторно посетил код Javascript и изменил атрибут класса li (в данном случае .Project) на атрибут span id (#PopUp. К сожалению, я не смог заставить свой код работать через это. Кто-нибудь может увидеть, где я go не так? 

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: c.thornval@live.dk &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>
...