Как пролистать oop изображений с помощью триггера класса

Question

Как мне oop просмотреть все изображения с помощью триггера вызова, когда я нажимаю на изображение, в модальном всплывающем окне должны отображаться мой текст и изображение.

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

<div portfolio-item "> 
    <a class="trigger "><img src="images/techify.jpg "/></a>
    <div class="modal ">
    <div class="modal-content "> 
    <img class="modalimages " src ="Images/techify.jpg ">
    <div class="modal-text ">
    <p> It is all about a training institute</p>
    </div> 
    </div>
    </div>
    </div> 
    <div class="modal-content "> 
    <img class="modalimages " src ="Images/HairStyling.jpg "> 
    </div>
    </div>

Answer 1

Если вы хотите добавить событие к каждому изображению, вы можете использовать некоторые Javascript вроде этого:

var images = document.querySelectorAll("img")

for( var i = 0 ; i < images.length ; i++ ) {
    images[i].addEventListener("click" someFunction)
}

Это сделает так, что при щелчке по любому изображению вызывается someFunction функция

Answer 2

Исходя из того, что вы предоставили, есть несколько незначительных проблем, которые могут даже помешать этому запуску, поэтому мне пришлось внести некоторые небольшие изменения в код, прежде чем я смог даже начать. Один - это }, помещенный в конец вашего скрипта. Другой - это <div portfolio-item">, имеющий только один ". Это может быть, а может и не быть тем, что вы пытаетесь сделать sh, но нам потребуется дополнительная информация, чтобы знать.

<style>
.modal { display: block; }
.show-modal { display: none; }
</style>

<div portfolio-item> 
  <a class="trigger">
    <img src="images/techify.jpg"/>
  </a>
  <div class="modal">
    <div class="modal-content"> 
      <img class="modalimages" src="Images/techify.jpg">
      <div class="modal-text">
        <p> It is all about a training institute</p>
      </div> 
    </div>
  </div>
  <div class="modal-content"> 
    <img class="modalimages" src="Images/HairStyling.jpg"> 
  </div>
</div>  
<button class="close-button">Close Button</button>

<script>
var modal = document.querySelectorAll(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");

function toggleModal() {
 for(i=0;i<modal.length;i++){
    modal[i].classList.toggle("show-modal");
  }
}

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

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick); 
</script> 

Если вы ищете, чтобы оба изображения были скрыты на при первом щелчке изображения или при нажатии кнопки (которую мне также пришлось добавить) вам нужно переместить следующий код на одну строку вверх

<div class="modal-content"> 
  <img class="modalimages" src="Images/HairStyling.jpg"> 
</div>