Как сделать смену класса и картинки при клике?
Есть картинки, при клике на цвет картинки меняются. Подскажите пожалуйста как сделать так что-бы _аctive и картинка менялись при клике. Код работает, но только если цвета и стили кнопок задать через псевдоклассы, как только внутрь button добавляешь класс код перестает работать, но цвет кнопки нужно вывести через html, поэтому псевдоклассы не подходят. Спасибо
snippet
Дополнительно:
Атрибут src у button нужно переименовать в data-src, чтобы получать его через dataset.
document.addEventListener('click', switchColorButtonHandler); function switchColorButtonHandler({ target }) { const clickedButton = target.closest('.slide-product__options'); if (!clickedButton) return; const productWrapper = clickedButton.closest('.slide-product__image'); const productImage = productWrapper.querySelector('.picture img'); productWrapper.querySelectorAll('button').forEach(button => { button.classList.remove('_active'); }); clickedButton.classList.add('_active'); productImage.src = clickedButton.dataset.src; } |
document.addEventListener('click', switchColorButtonHandler); function switchColorButtonHandler({ target }) { const clickedButton = target.closest('.slide-product__options'); if (!clickedButton) return; const productWrapper = clickedButton.closest('.slide-product__image'); const productImage = productWrapper.querySelector('.picture img'); productWrapper.querySelectorAll('button').forEach(button => { button.classList.remove('_active'); }); clickedButton.classList.add('_active'); productImage.src = clickedButton.dataset.src; }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации смены класса и картинки при клике на элементе веб-страницы, вам необходимо использовать JavaScript. Вот пример кода на PHP, который показывает, как это можно сделать:
.active { border: 2px solid red; } <img id="myImage" src="img1.jpg" style="width:100px;height:100px"> <button>Change Class</button> function changeImage() { var image = document.getElementById("myImage"); if (image.src.match("img1.jpg")) { image.src = "img2.jpg"; } else { image.src = "img1.jpg"; } } function changeClass() { var element = document.getElementById("myImage"); if (element.classList.contains("active")) { element.classList.remove("active"); } else { element.classList.add("active"); } }.active { border: 2px solid red; } <img id="myImage" src="img1.jpg" style="width:100px;height:100px"> <button>Change Class</button> function changeImage() { var image = document.getElementById("myImage"); if (image.src.match("img1.jpg")) { image.src = "img2.jpg"; } else { image.src = "img1.jpg"; } } function changeClass() { var element = document.getElementById("myImage"); if (element.classList.contains("active")) { element.classList.remove("active"); } else { element.classList.add("active"); } }
В данном примере, при нажатии на изображение с id "myImage", будет происходить смена картинки между "img1.jpg" и "img2.jpg". Также, при нажатии на кнопку "Change Class", будет меняться класс элемента с id "myImage" на "active" и обратно. Класс "active" применяет к изображению рамку красного цвета.
Вы можете настроить этот код под свои нужды, изменяя id элементов, пути к картинкам и стили в CSS. Надеюсь, это поможет вам решить вашу проблему с сменой класса и картинки при клике на элементе веб-страницы.