Question

这是我的HTML：

<body>
    <div class="container">
        <img src="2.png" />
        <div id="colorChange"></div>
    </div>

    <div class="colorChoice">
        <form id="colorChoiceForm">
            <ul id="colorListParent">
                <li class="noButton">
                    <input type="radio" name="colorGroup" value="aaa12" id="aaa12" />
                    <label style="background-color:#d21212" class="colorPick" for="aaa12"></label>
                </li>
                <li class="noButton">
                    <input type="radio" name="colorGroup" value="daaa" id="daaa"/>
                    <label style="background-color:#202020" class="colorPick" for="daaa"></label>
                </li>
            </ul>
        </form>
    </div>>
</body>

和JS：

function load() {
    document.getElementById("colorListParent").addEventListener("click", function(e){
        var bgrColor = (e.target.style.backgroundColor); 
        console.log(bgrColor);
        console.log(typeof bgrColor);
        document.getElementById("colorChange").style.backgroundColor = bgrColor;
    });
}

window.onload = load;

直到我用带有for / id脚本的按钮绑定标签 - bby我的意思是#colorChange的背景颜色更改为点击标签的颜色。现在var bgrColor返回两个字符串 - 第一个是我需要的颜色，但第二个是空的，＃colorChange的颜色不会改变。

哪里有问题？

Answer 1

一旦你开始使用标签[for]，你就必须以不同的方式接近它，因为你的＆＃34;点击＆＃34;事件将被触发两次 - 一次用于标签，一次用于单选按钮（自动选择。Here是一个工作小提琴，下面是更改的JS代码。

function load() {
    document.getElementById("colorListParent").addEventListener("click", function(e){
        //alert(e.target.id);
        if(e.target.id) {
            var selector = 'label[for=' + e.target.id + ']';
            var label = document.querySelector(selector);
            var bgrColor = label.style.backgroundColor;
            //alert(bgrColor);
            //alert(typeof bgrColor);
            document.getElementById("colorChange").style.backgroundColor = bgrColor;
        }
    });
}

window.onload = load;

Answer 2

当您点击标签时，输入＆＃39;点击了DOM元素，所以你基本上有2点击＆＃39;事件。尝试添加类似的东西：

        if(bgrColor && bgrColor.length>0){
            document.getElementById("colorChange").style.backgroundColor = bgrColor;
        }

JS返回标签背景颜色

2 个答案: