Блог

У меня есть множество небольших изображений, которые я визуализирую с помощью HTML. Когда пользователь нажимает на изображение, они затем открываются в модальном теле большого размера. Так как мне нужно динамически изменять содержимое модального тела, например, когда Picture1.jpg нажата, модальное тело должно включать picture1.jpg и наоборот.

Однако я не уверен, как мне вызвать событие onclick на <a> теге или <img> теге, чтобы получить некоторую информацию, которая поможет мне определить, на какое изображение был сделан щелчок.

 <a href="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
    <img src="images/Picture1.jpg" alt="image not available">
</a>
<a href="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
    <img src="images/Picture2.jpg" alt="image not available">
</a>
 

Модальный

 <div class="modal-body">
       <img src="images/Picture1.jpg" alt="image not available" id="imagepreview" style="width:100%; height: 100%;" >
</div>
 

Вы можете использовать event.target обычный javascript и $(this) , если хотите, использовать Jquery.

 //Plain Javascript
document.getElementsByTagName('img')[0].addEventListener("click", function(event) {
  console.log(event.target.src);
});

//Jquery
$('img').click(function() {
  console.log($(this).attr('src'));
}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="https://picsum.photos/200"> 

Я бы использовал a Button , так как вы на самом деле не связываетесь, вы выполняете функцию JS. Затем я бы добавил прослушиватель событий к кнопкам, который обновляет целевые изображения src на основе значения button «s data-src «.

 const buttonList = document.getElementsByClassName('target-button');
const modalImg = document.getElementById('imagepreview');

const processImg = (imgSrc) => () => {
  modalImg.src = imgSrc;
};

Array.from(buttonList).forEach((button) => {
  const buttonImgSrc = button.dataset.src;
  button.addEventListener('click', processImg(buttonImgSrc))
}); 

 <button class="target-button" data-src="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
    <img src="images/Picture1.jpg" alt="image not available" />
</button>
<button class="target-button" data-src="images/Picture2.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
    <img src="images/Picture2.jpg" alt="image not available" />
</button>

<img src="" alt="image not available" id="imagepreview" style="width:100%; height: 100%;" />