Как заставить отрабатывать скрипт на всех блоках?

Question

[barsecky]

Добрый вечер.
Нужна ваша помощь.
На странице сайта есть три блока с картинками, у каждого блока есть свои кнопки для изменения картинок.
Как заставить работать один скрипт для всех блоков?
Спасибо боьшое за помощь.

Примерно сделал на codepen

Comments

[WapSter]

Для начала разметку верную сделай, чтобы у каждого отдельного блока была обертка. Проще будет искать от элемента button на котором произошел клик, картинку в которой поменять src.

Answer 1

[Lendwye]

У вас js ищет первый ".pic img" а не тот что надо, плюс очень странно организованны листенеры, вешайте сразу на кнопки. Как решение ищите ближайший по дом дереву элемент, через .closest
https://developer.mozilla.org/ru/docs/Web/API/Elem...

Comments

[barsecky]

максимум что у меня получается - это менять картинки в одном блоке про помощи всех кнопок((((

[Lendwye]

barsecky, Я же вам написал что это потому что js ищет первый элемент на сайте. В качестве альтернативы используйте метод .closest(), или если для вас это сложно вешайте дата аттрибут на кнопку, где будет указан идентификатор элемента который вам нужно менять

[Lendwye]

barsecky, Я могу вам скинуть готовый код если вы хотите, но будет лучше если вы сами реализуете функционал

[barsecky]

все равно не могу понять как это работает(((
сделал новый пример на codepen
использовал closest но ни чего не получается(((
картинки меняются только в первом блок
да еще и кнопки должны менять подсветку у конкретного блока, а по факту меняется подсветка только у одной а у других пропадает(((
уже не знаю куда копать((( не могу понять в чем дело(((

[Lendwye]

buttons = document.querySelectorAll('button')
buttons.forEach((el) => {
  el.addEventListener("click", () => {
    el.closest(".block").querySelector('.pic > img').src = el.dataset.src;
    buttons.forEach((elem) => {
      elem.classList.remove("active")
    })
    el.classList.add("active")
  })
})

[Lendwye]

barsecky, надеюсь разобрались, попробуйте переписать по своему, так точно закрепите материал

[barsecky]

Lendwye, спасибо большое с картинками заработало - а вот с кнопками не хочет (((
если вам не трудно подскажите как еще и тут сделать.

[Lendwye]

barsecky,
buttons = document.querySelectorAll('button')
buttons.forEach((el) => {
el.addEventListener("click", () => {
el.closest(".block").querySelector('.pic > img').src = el.dataset.src;
el.closest(".block").querySelectorAll('button').forEach((elem) => {
elem.classList.remove("active")
})
el.classList.add("active")
})
})

[barsecky]

Lendwye, спасибо большое, очень помогли!