Javascript 单击div类中的单选选项时更改div类

这是我第一次真正深入研究javascript。我已经做了几个小时了，还没有找到解决办法（尽管我学到了很多）

函数changeClass（）{
var NAME=document.getElementById（“切换器”）；
var currentClass=NAME.className；
如果（currentClass==“开关蓝色”）{
NAME.className=“开关红色”；
}否则{
NAME.className=“开关蓝色”；
}
} 
window.onload=函数（）
{
document.getElementById（“切换器”）.addEventListener（'click'，changeClass）；
}

以下是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>

对
不

默认为蓝色背景。如果他们选择“否”，我希望它为红色，如果他们单击“是”，则返回蓝色，这是css中的所有内容。如果我手动将类从switchblue更改为switchred，它就会工作。现在它什么也没做

---

谢谢大家!

当您添加css类时，它看起来工作正常

这是一本书。我想你错过了这些款式。 在你的头脑中添加样式，看看是否适合你

<style>
.switch-blue{
    background:blue;
    color:#fff;
}
.switch-red{
    background:red;
      color:#fff;
}</style>

.换成蓝色{
背景：蓝色；
颜色：#fff；
}
.换成红色{
背景：红色；
颜色：#fff；
}

您可以根据需要随意更改样式

编辑

---

我刚刚注意到您将事件侦听器连接到div，而不是单选按钮。这将在单击div而不是按钮时更改背景。看看这个。

当您添加css类时，它看起来工作得很好

这是一本书。我想你错过了这些款式。 在你的头脑中添加样式，看看是否适合你

<style>
.switch-blue{
    background:blue;
    color:#fff;
}
.switch-red{
    background:red;
      color:#fff;
}</style>

.换成蓝色{
背景：蓝色；
颜色：#fff；
}
.换成红色{
背景：红色；
颜色：#fff；
}

您可以根据需要随意更改样式

编辑
我刚刚注意到您将事件侦听器连接到div，而不是单选按钮。这将在单击div而不是按钮时更改背景。看这个

JS小提琴：

---

JS Fiddle:

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

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


编辑
但这不会保证单选按钮单击时类的更改，因为事件绑定到父div，所以在div anywhere上单击将触发事件，因此尝试在单选按钮上绑定事件：


这里的问题是，当内部元素单击event bubbleup时，事件传播会导致调用函数两次，从而更改类，然后恢复，请尝试：

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


编辑
但这不会保证单选按钮单击时类的更改，因为事件绑定到父div，所以在div anywhere上单击将触发事件，因此尝试在单选按钮上绑定事件：


您是否希望使用jQuery进行此操作（因此标记？）您是否希望使用jQuery进行此操作（因此标记？）单击事件将传播到div。我有点担心它可能不会传播，但我在Chrome中的测试也显示事件冒泡。但是，如果记忆有用的话，IE的某些版本可能会有问题。是的，我同意。是的。点击事件将传播到div。我有点担心它可能不会传播，但我在Chrome中的测试显示，到目前为止，事件也在冒泡。但是，如果记忆有用的话，IE的某些版本可能会有问题。是的，我同意。确实如此。只要单击该分区，背景就会改变。请尝试在单选按钮外单击。只要单击该分区，背景就会改变。请尝试在单选按钮外单击。
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)
    };
}