javascript - 单击其中的单选选项时更改 div 类

Question

这是我第一次真正深入研究 JavaScript。我已经研究了几个小时，但还没有找到解决方案(尽管我学到了很多)。

<script type="text/javascript">
function changeClass(){
    var NAME = document.getElementById("switcher");
    var currentClass = NAME.className;
    if (currentClass == "switch switch-blue") { 
        NAME.className = "switch switch-red";   
    } else {
        NAME.className = "switch switch-blue";  
    }
} 
 window.onload = function()
    {
        document.getElementById("switcher").addEventListener( 'click' , changeClass );
    }

</script>

这是 HTML:

<div class="switch switch-blue" id="switcher">
 <input type="radio" class="switch-input" name="resp" value="1" id="respyes" checked>
 <label for="respyes" class="switch-label">YES</label>
 <input type="radio" class="switch-input" name="resp" value="2" id="respno">
 <label for="respno" class="switch-label">NO</label>
</div>

默认为蓝色背景。如果他们选择“否”，我希望它是红色的，然后如果他们单击"is"，则返回蓝色，所有这些都在 CSS 中。如果我手动将类从 switch-blue 更改为 switch-red，它就会起作用。现在它完全没有任何作用。

谢谢!

Answer 1

这里的问题是当内部元素单击事件冒泡时事件传播，因此它会导致调用您的函数两次，从而更改类然后恢复回来，因此请尝试:

function changeClass(event) {
    var NAME = document.getElementById("switcher");

    var currentClass = NAME.className;
    if (currentClass == "switch switch-blue") {
        NAME.className = "switch switch-red";
    } else {
        NAME.className = "switch switch-blue";
    }
    if (window.event != undefined) window.event.cancelBubble = true;
    event.stopPropagation();
}
window.onload = function () {
    document.getElementById("switcher").addEventListener('click', changeClass);
}

event.stopPropagation(); 将停止此冒泡，对于 IE 使用 window.event.cancelBubble = true;

Here is working JSFiddle

编辑

但这不能保证单选按钮单击时类的更改，因为事件绑定(bind)到父 div，因此单击 div 上的任何位置都会触发该事件，因此尝试在单选按钮上绑定(bind)事件:

Event on Radio click

function changeClass(clickedItem) {
    var NAME = document.getElementById("switcher");

    var currentClass = NAME.className;
    if (clickedItem == 1) {
        NAME.className = "switch switch-red";
    } else {
        NAME.className = "switch switch-blue";
    }
}
window.onload = function () {

    var yes = document.getElementById('respyes');
    var no = document.getElementById('respno');
    yes.onclick = function () {
        changeClass(2)
    };
    no.onclick = function () {
        changeClass(1)
    };
}