单选按钮 - 选择选项时更改图像边框颜色

Question

i have a woocommerce website with filter for select color for the product. 3 colors: black, blue, white. when they select the radio button it automaticly shows only the products available in that color. Each product image (thumbnail) have a border with a grey color. my goal is to change the product image border color to the selected option.

please advice:)

Answer 1

So the major challenge is that WordPress destroys and the re-creates the blocks with the paintings so to circumvent that I added a delay of 600ms for the frames to update... This does work but it is not the best way to do it, of that I am sure.

    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);
    };