Сделать анимацию для указанного c объекта из множества с помощью этого селектора в javascript

Question

Как я могу сделать функцию javascript, чтобы при нажатии на указанное c изображение (идентификаторы отличались) изображение исчезло? Я делаю JS функцию, но она не работает. Изображения загружаются из почтового запроса в базу данных, и перед показом домену существует задержка !!!

var matches = document.querySelectorAll("img");

matches.forEach((this) => {
  this.addEventListener("click", () => {
    this.className("hidden");
  });
});

.hidden {
  display: none;
}

<div id="keys">
  <img src="images\Clothing\1.png" style="width:10%; padding:0.1em; margin:0.5em" class="zoom" id="img0"><img src="images\Clothing\2.png" style="width:10%; padding:0.1em; margin:0.5em" class="zoom" id="img1"><img src="images\Clothing\3.png" style="width:10%; padding:0.1em; margin:0.5em"
    class="zoom" id="img2"><img src="images\Clothing\4.png" style="width:10%; padding:0.1em; margin:0.5em" class="zoom" id="img3">
  <img src="images\Vegetables\4.png" style="width:10%; padding:0.1em; margin:0.5em" class="zoom" id="img43"><img src="images\Vegetables\5.png" style="width:10%; padding:0.1em; margin:0.5em" class="zoom" id="img44">
</div>

Answer 1

Здесь есть пара вопросов. Во-первых, this является зарезервированным ключевым словом. Вы не можете использовать его в качестве имени аргумента функции. Во-вторых, this во внутренней функции стрелки будет ссылаться на внешнюю область видимости из-за лексического связывания в функциях стрелки. Чтобы ссылаться на элемент img, по которому щелкнули, вам нужно использовать анонимную функцию. И, наконец, отсутствует свойство classname элемента. Вы можете использовать classList.add() вместо этого. Попробуйте это:

var matches = document.querySelectorAll("img");
matches.forEach(el => {
  el.addEventListener("click", function() {
    this.classList.add("hidden");
  });
});

.hidden {
  display: none;
}

#keys img.zoom {
  width: 10%;
  padding: 0.1em;
  margin: 0.5em;
}

<div id="keys">
  <img src="images\Clothing\1.png" class="zoom" id="img0">
  <img src="images\Clothing\2.png" class="zoom" id="img1">
  <img src="images\Clothing\3.png" class="zoom" id="img2">
  <img src="images\Clothing\4.png" class="zoom" id="img3">
  <img src="images\Vegetables\4.png" class="zoom" id="img43">
  <img src="images\Vegetables\5.png" class="zoom" id="img44">
</div>

Кроме того, вы должны удалить атрибут inline style, так как это не очень хорошая практика. Вы должны применять стили с помощью внешних таблиц стилей. Поскольку у вас уже есть класс для элементов img, на него можно напрямую нацелить.

- Обновление -

Изображения загружаются из POST запрос к базе данных и задержка перед отображением в DOM

. В этом случае вам необходимо привязать обработчики событий выше после запроса POST.

В качестве альтернативы, поскольку вы отметили jQuery в вопросе, вы можете использовать его для простой установки одного делегированного обработчика события:

Эквивалентная логика c в jQuery будет такой:

$(document).on('click', 'img.zoom', function() {
  $(this).addClass('hidden');
});

Answer 2

При использовании функций со стрелками нет повторного связывания this, поэтому ваша внутренняя функция this относится к window. То же самое относится и к внешней функции, так как this является зарезервированным словом, вы не можете назначить его таким образом, поэтому вам нужно использовать другое имя.

Чтобы восстановить цель click, которую вы можете использовать данные события .

Если изображения загружаются асинхронно, при настройке слушателей элементы не будут существовать, поэтому вы можете делегировать другой существующий элемент и проверить, target matches требуемый селектор.

document.getElementById("keys").addEventListener("click", e => {
  if (e.target.matches("img")) {
    e.target.className = "hidden";
  }
});

.hidden {
  display: none;
}

<div id="keys">
  <img src="https://placekitten.com/200/300" style="width:10%; padding:0.1em; margin:0.5em" class="zoom" id="img43">
  <img src="https://placekitten.com/g/200/300" style="width:10%; padding:0.1em; margin:0.5em" class="zoom" id="img44">
</div>

Answer 3

document.querySelectorAll() возвращает NodeList объекты, которые являются коллекциями узлов. Мы можем использовать for l oop для перебора этого списка узлов, но не for...in или for..each согласно документации Mozilla https://developer.mozilla.org/en-US/docs/Web/API/NodeList

Не используйте for ... in или для каждого ... in для перечисления элементов в NodeLists, так как они также будут перечислять его длину, свойства элемента и причину. ошибки, если ваш сценарий предполагает, что он имеет дело только с объектами-элементами. Кроме того, for..in не гарантируется посещение свойств в каком-либо конкретном порядке.

Так что в соответствии с этим следующим кодом может быть полезным для вас

document.addEventListener("DOMContentLoaded", function () {
  var matches = document.querySelectorAll("img");
  console.log("matches ", matches);
  for (let i = 0; i < matches.length; i++) {
    matches[i].addEventListener("click", (event) => {
      matches[i].classList.add("hidden");
    });
  }
})