У меня есть веб-сайт woocommerce с фильтром для выбора цвета продукта. 3 цвета: черный, синий, белый. когда они выбирают переключатель, он автоматически показывает только продукты, доступные в этом цвете. Каждое изображение продукта (миниатюра) имеет рамку серого цвета. моя цель - изменить цвет границы изображения продукта на выбранный вариант.
пожалуйста посоветуй :)
Если сайт работает, вы пришлете ссылку, и я могу отправить вам код для этого?
Таким образом, основная проблема заключается в том, что WordPress уничтожает и воссоздает блоки с рисунками, поэтому, чтобы обойти это, я добавил задержку в 600 мс для обновления кадров... Это работает, но это не лучший способ сделать это, в этом я уверен.
radios = document.querySelectorAll('.jet-color-image-list__item');
function getSetColor(index) {
setTimeout(() => {
buttons = document.querySelectorAll('.jet-color-image-list__row.jet-filter-row');
holder = document.querySelectorAll('.elementor-jet-woo-products');
frames = document.getElementsByClassName('jet-woo-product-thumbnail');
for (i = 0; i < radios.length; i++) {
if (radios[i].firstElementChild.checked) {
activeColor = buttons[i].firstElementChild.lastElementChild.firstElementChild.firstElementChild.style.backgroundColor;
}
}
for (i = 0; i < frames.length; i++) {
frames[i].style.borderColor = activeColor
}
}, 600);
};
for (i = 0; i < radios.length; i++) {
radios[i].addEventListener('click', getSetColor);
};
что у вас есть до сих пор?