Как получить изображение SRC для каждого div с той же структурой? - PullRequest
Новая
       19

Как получить изображение SRC для каждого div с той же структурой?

2 голосов
/ 05 июня 2019

У меня есть несколько одинаковых структур div с изображениями. И теперь я пытаюсь получить изображение кликаемого изображения.

У меня есть несколько div с такой структурой: 

<div id="modal" class="model">
    <img id="image" src= "<%= loop.url %>">

    <div class="container">
        <%- loop.title %>
    </div>
</div>

Я пытаюсь получить изображение клика. Я пытаюсь следующий код для этого: 

document.querySelectorAll('.model').forEach(function(item) {
        item.addEventListener('click', function() {
            modal.style.display = "block";
            captionText.innerHTML = document.getElementById("image").src;
        });
    });

Но это только дает мой источник первого изображения для всех, а не для каждого изображения.

Я новичок в разработке front end и буду признателен за любую помощь. 

document.querySelectorAll('.model').forEach(function(item) {
        item.addEventListener('click', function() {
            modal.style.display = "block";
            captionText.innerHTML = document.getElementById("image").src;
        });
    });
<div id="modal" class="model">
    <img id="image" src= "<%= loop.url %>">

    <div class="container">
        <%- loop.title %>
    </div>
</div>

Ответы [ 4 ]

2 голосов
/ 05 июня 2019

Вы можете использовать querySelector для извлечения первого img элемента в .modal div.

querySelector работает так, как вы привыкли к CSS. Э.Г.

  • element.querySelector("img") выбирает первое с тегом <img>
  • element.querySelector(".someclass") выбирает первый класс
  • element.querySelector("#someid") выбирает элемент с идентификатором 

document
  .querySelectorAll(".modal")
  .forEach(
    el => el.addEventListener(
      "click",
      event => {
        const img = el.querySelector("img");
        if (img) console.log(img.src);
      }
    )
  );
<div class="modal">
  <img src="src1.jpg">
  <p>Image 1</p>
</div>

<div class="modal">
  <img src="src2.jpg">
  <p>Image 2</p>
</div>

<div class="modal">
  <img src="src3.jpg">
  <p>Image 3</p>
</div>

<div class="modal">
  <img src="src4.jpg">
  <p>Image 4</p>
</div>
1 голос
/ 05 июня 2019

Вы можете получить img источник, как показано ниже: 

$(document).on('click', '.modal', function(event)
{
    console.log($(this).find('img').attr("src"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal">
  <img src="src1.jpg" alt="im1">
  <p>Image 1</p>
</div>

<div class="modal">
  <img src="src2.jpg" alt="im2">
  <p>Image 2</p>
</div>

<div class="modal">
  <img src="src3.jpg" alt="im3">
  <p>Image 3</p>
</div>

<div class="modal">
  <img src="src4.jpg" alt="im4">
  <p>Image 4</p>
</div>
1 голос
/ 05 июня 2019

Попробуйте: 

$("img").click(function(){
   captionText.innerHTML = $(this).attr('src');
});

Это будет работать, если у вас есть Jquery.Если вы этого не сделаете, добавьте этот скрипт в ваш HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

0 голосов
/ 05 июня 2019

Я пытался проверить, могу ли я запустить getElementById для элемента, но у него нет такой функции.Он имеет getElementsByTagName, поэтому вы можете ссылаться на элементы img внутри элемента 

let captionText = document.getElementById('captionText')

document.querySelectorAll('.model').forEach(function(item) {
    let currentSrc = item.getElementsByTagName('img').item(0).src
    item.addEventListener('click', function(x) {
        captionText.innerHTML = currentSrc;
    });
});
...