0

Есть несколько фотографий в блоке gl. Как мне получать src фотографии, по которой кликну?

Вот пример (упрощенный т.к без решения с img нет смысла писать дальше его):

<div id="pic">
  <img src="img/img-1.jpg" alt="">
  <img src="img/img-2.jpg" alt="">
  <img src="img/img-3.jpg" alt="">
  <img src="img/img-4.jpg" alt="">
  <img src="img/img-5.jpg" alt="">
</div>

По нажатию любой из этих картинок выполняет одну и ту же функции (открытии фото в модальном окне). У меня возникают трудности с получением src той фотографии, по которой кликнул. Я пытаюсь получить все фото в блоке с помощью:

pic.getElementsByTagName('img')

, а после получить getAttribute(src)

Но это не работает. Получается получить src фото если я указываю:

pic.getElementsByTagName('img')[0] 

и выше ([1][2] и т.д.). Тогда у меня все работает хорошо.

Как вы понимаете в случае выше я возьму src только того img которому укажу [число], а мне нужно отловить по какому img был совершен клик.

PS пожалуйста, без готовых кодов. Только намеки как сделать это.

4
  • зависит от того, где и как вы их получаете, если <img onclick="hey(this);"/> то function hey(x){ console.log(x.src); }
    – teran
    Commented 21 февр. 2019 в 12:48
  • Я не буду писать onclick() в каждой строке, это не красиво) Я пытаюсь отловить по какому img был клик и забрать src. Вариант ниже рабочий, но я все еще пытаюсь своей головой уловить это Commented 21 февр. 2019 в 13:46
  • дак я вам и говорю, что зависит от того, как вы это в целом делаете, навешиваете обработчик клика на картинки.
    – teran
    Commented 21 февр. 2019 в 14:04
  • Если Вам не будет сложно, посмотрите пожалуйста мой код jsfiddle.net/g49dq5hn/1. Я добавил везде комментарии. Все работает, но я не могу понять: можно ли повесить вместо обработчика просто myimg.onclick = function(){} можно ли по жругому написать мой код по ссылке? За любую помощь низкий поклон Commented 21 февр. 2019 в 14:29

1 ответ 1

1

[...document.querySelectorAll("div > img")].forEach(item => {
  item.addEventListener("click", (e) => {
    console.log(e.currentTarget.getAttribute("src"));
  });
});
.fix-snippet>div {
  height: 100px;
  width: 100px;
  display: inline-block;
}

img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
<div class="fix-snippet">
  <div>
    <img src="https://picsum.photos/g/200/301" alt="1">
  </div>
  <div>
    <img src="https://picsum.photos/g/200/302" alt="2">
  </div>
  <div>
    <img src="https://picsum.photos/g/200/303" alt="3">
  </div>
  <div>
    <img src="https://picsum.photos/g/200/304" alt="4">
  </div>
  <div>
    <img src="https://picsum.photos/g/200/305" alt="5">
  </div>
</div>

2
  • Не стоит указывать стили конкртено для div в сниппете, а то его консоль тоже начинает использовать такие же стили)
    – De.Minov
    Commented 21 февр. 2019 в 12:40
  • @CbIPoK2513, хех, не знал :)
    – meine
    Commented 21 февр. 2019 в 16:08

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.