Как сделать событие клик на каждую секцию свой?

Question

[Валентин Попов]

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

Если я кликаю в одной секции на превью, то меняется только она. В другой галереи изменения не происходят. Вроде прошелся по DOM элементам через делегирование событий, но почему то не работает правильно.

Вот сама реализация на данный момент:
https://jsfiddle.net/12ag4dzo/1/

Answer 1

[0xD34F]

const gallerySelector = '.js-product__item';
const previewSelector = '.view__item img';
const mainImageSelector = '.js-product__img--current';
const showImage = preview => preview
  .closest(gallerySelector)
  .querySelector(mainImageSelector)
  .src = preview.src;

document.addEventListener('click', ({ target: t }) => {
  if (t.matches(previewSelector)) {
    showImage(t);
  }
});

// или

document.querySelectorAll(previewSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => showImage(e.target));

Comments

[Валентин Попов]

Спасибо!