JS Как сделать функцию которая будет отслеживать элемент, и в случае нужного элемента выполнять функцию
const switchLike = document.querySelector('.elements__like');
switchLike.addEventListener('click', function() {
const image = switchLike.getAttribute('src')
if (image === './img/like.svg') {
switchLike.removeAttribute('src');
switchLike.setAttribute('src', './img/blacklike.svg');
} else {
switchLike.removeAttribute('src');
switchLike.setAttribute('src', './img/like.svg');
}
})
Функция работает для одного элемента, а у меня их n-ое количество задачи функции менять 1 картинку на другую. Теперь нужно сделать для всех. Я так понимаю нужна функция в которую мы поместим цикл со всеми элементами, и при использовании элемента вызовем функцию замены. Но реализовать не получается(
Ответы (3 шт):
Предлагаю посмотреть документацию, по поводу ДОМ и как с ним работать.
пару сслыок:
Ваш вариант
https://developer.mozilla.org/ru/docs/Web/API/Document/querySelector
а вот еще
https://developer.mozilla.org/ru/docs/Web/API/Document/querySelectorAll
ну и эта тоже
если ответа в них нет, то значит нужно подумать о другом подходе ;)
Удачи!
Попробуйте посмотреть в сторону наблюдатель js по вопросу > отслеживать элемент, и в случае нужного элемента выполнять функцию
MutationObserver: наблюдатель за изменениями
Intersection Observer API позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа viewport.
ResizeObserver API — это интерфейс слежения за изменениями размеров элемента. Это своего рода аналог события window.resize для элемента.
document.querySelectorAll('.elements__like').forEach(el =>
el.addEventListener('click', function() {
const image = this.getAttribute('src');
if (image === './img/like.svg') {
this.removeAttribute('src');
this.setAttribute('src', './img/blacklike.svg');
} else {
this.removeAttribute('src');
this.setAttribute('src', './img/like.svg');
}
})
);