Как отлавливать клик по определенной группе изображений?

Question

[Дмитрий Филандор]

Всем привет! Ребят помогите, уже мозг вынес этой задачей.

У меня динамически генерируются около сотни изображений:

это список этих картинок
  <img src="../../Images/Items/@item.Img"   id="@item.Items_Id" name="@item.Items_Id"/>

тут, в блок пониже, мне необходимо визуально отображать пять кликнутых картинок
<div style="background-color:yellow">

        <img src="../../Images/empty.png"   id="ImgNeed1" />
        <img src="../../Images/empty.png"   id="ImgNeed2" />
        <img src="../../Images/empty.png"   id="ImgNeed3" />
        <img src="../../Images/empty.png"   id="ImgNeed4" />
        <img src="../../Images/empty.png"   id="ImgNeed5" />
    </div>

У меня получается отлавливать событие клик и всего body, но это мешает логике работы

window.onload = function () {
        document.body.onclick = function (event) {

 if (document.getElementById("ImgNeed1").src == 'http://localhost:11733/Images/empty.png') { document.getElementById("ImgNeed1").src = event.target.src; return; }
                if (document.getElementById("ImgNeed2").src == 'http://localhost:11733/Images/empty.png') { document.getElementById("ImgNeed2").src = event.target.src; return; }
...
 }
    }

а вот как ловить клик только у изображений...? И в идеале изображений определенного класа или в определенном блоке, чтобы логика не нарушалась (на любую картинку в боди кликнул и она перенеслась)
как не пробовал "слушать" клики по картинками:

window.onload = function () {
       var element = document.getElementsByTagName('img');
       element.onclick = function () { alert('did stuff #1'); };
   }

или
document.body.getElementsByTagName('img').onclick = function (event) {

или

document.body.image.onclick = function (event) {

только глобально с боди document.body.onclick работает хоть тресни ему

..
UP1
Костыль, но решает задачу

...
 document.body.onclick = function (event) {
           if (event.target.className == "ItemsForChois") {  - если это одна из сотни картинок - обрабатываем
...

Answer 1

[Дмитрий Еремин]

Добавьте им класс

<div style="background-color:yellow">
        <img class="clickable" src="../../Images/empty.png"   id="ImgNeed1" />
        <img class="clickable" src="../../Images/empty.png"   id="ImgNeed2" />
        <img class="clickable" src="../../Images/empty.png"   id="ImgNeed3" />
        <img class="clickable" src="../../Images/empty.png"   id="ImgNeed4" />
        <img class="clickable" src="../../Images/empty.png"   id="ImgNeed5" />
    </div>

И вот
document.getElementsByClassName("clickable")

Ну или вот так лучше (без добавления классов)

document.querySelectorAll("img[id^='ImgNeed']").onclick

Comments

[Дмитрий Филандор]

мне ловить клики нужно не на ряде из 5 штук фиксированых картинок ниже, а в списке динамически генерируемых -

это список этих картинок
  <img src="../../Images/Items/@item.Img"   id="@item.Items_Id" name="@item.Items_Id"/>

поэтому ваш первый вариант подходит:

<img class="ItemsForChois" src="../../Images/Items/@item.Img"   id="@item.Items_Id" name="@item.Items_Id" />

window.onload = function () {
      
        document.getElementsByClassName('ItemsForChois').onclick = function (event) {
            alert('d');
            t = event.target || event.srcElement;
//а тут уже ставлю ту картинку которую кликнули (одну из сотни) в свободное место в блоке картинок ниже
  if (document.getElementById("ImgNeed1").src == 'http://localhost:11733/Images/empty.png') { document.getElementById("ImgNeed1").src = event.target.src; return; }

}
}

вот сделал как выше, нет алерта... не отрабатывает, стоит заменить на document.body.onclick = function (event) {

все работает (

[Дмитрий Еремин]

Дмитрий Филандор, вот так работает:

<script>
function fun(image){
	alert(image.src)
}
</script>

<div style="background-color:yellow">

        <img class="clickable" src="../../Images/empty.png"   id="ImgNeed1" onclick="fun(this)" />
        <img class="clickable" src="../../Images/empty.png"   id="ImgNeed2" onclick="fun(this)"/>
        <img class="clickable" src="../../Images/empty.png"   id="ImgNeed3" onclick="fun(this)"/>
        <img class="clickable" src="../../Images/empty.png"   id="ImgNeed4" onclick="fun(this)"/>
        <img class="clickable" src="../../Images/empty.png"   id="ImgNeed5" onclick="fun(this)"/>
    </div>

[Дмитрий Филандор]

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

что то не заходит в функцию - https://jsfiddle.net/kw4rg3v5/

[Дмитрий Еремин]

Дмитрий Филандор, в jsfiddle отрабатывает такой скрипт:
https://jsfiddle.net/kw4rg3v5/1/

Это какая-то особенность загрузки скриптов сервисом

[Дмитрий Еремин]

Подробнее: https://learn.javascript.ru/function-declaration-e...

[Дмитрий Филандор]

Дмитрий Еремин, отлично, спасибо

Answer 2

[j n]

1) Начнём с того, что у document.body нет метода getElementsByClassName() и getElementById(). Если вы обратитесь к спецификации, то увидите, что эти методы используются исключительно как методы объекта document.

2) Если вам нужно искать элементы внутри еще одного элемента (например, как у вас - body), то вам следует воспользоваться современными методами поиска элементов - element.querySelector() и elemnt.querySelectorAll()

3) Вешать события лучше при помощи element.addEventListener(), так как методы вроде onclick, onload перебивают друг друга. Так, например, если вам нужно повесить сразу два обработчика события click, то при использовании onclick второй перебьет первый, сработает только последний.

Ваша функция, если я вас правильно понял, должна выглядеть примерно так:

window.addEventListener('load', function() {
    var images = document.querySelectorAll('.clickable-images');
   /* images - это NodeList, объект, похожий на обычный массив, но не совсем. Нам необходимо перебрать все элементы images и повесить им обработчик клика */
    images.forEach(function(image) {
        image.addEventListener('click', imageClickFunc);
    });

    /* Теперь осталось написать сам обработчик. Это обычная функция, для которой this будет кликнутый элемент */

    function imageClickFunc() {
        alert('Привет! Ты кликнул на ' + this);  // ну или любой другой код
    }
});

Comments

[Дмитрий Филандор]

спасибо за хорошее решение, но не отрабатывает - https://jsfiddle.net/xt48e2df/ все же вроде правильно

[j n]

Дмитрий Филандор, потому что imgNeed у вас - это id, а вы ловите класс, как в моем примере. Поменяйте селектор с точки на #