單選按鈕 - 選擇選項時更改圖像邊框顏色

Question

我有一個 woocommerce 網站，其中包含產品的 select 顏色過濾器。 3 colors：黑色、藍色、白色。 當他們點擊 select 單選按鈕時，它會自動僅顯示該顏色的可用產品。 每個產品圖像（縮略圖）都有一個灰色邊框。 我的目標是將產品圖像邊框顏色更改為所選選項。

請指教：）

Answer 1

所以主要的挑戰是 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);
    };