1

这是我第一次真正深入了解 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>

默认为蓝色背景。如果他们选择不，我希望它是红色的，然后如果他们单击是，则返回蓝色，这一切都在 css 中。如果我手动将类从 switch-blue 更改为 switch-red，它可以工作。现在它完全没有任何作用。

谢谢！

4

3 回答 3

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;

这是工作的JSFiddle

编辑

但这不会保证单选按钮单击时类的更改，因为事件绑定到父 div，因此单击任何地方的 div 都会触发事件，因此请尝试在单选按钮上绑定事件：

电台点击事件

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)
    };
}
于 2013-10-04T18:52:23.107 回答
0

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

这是一个演示。我认为您缺少样式。将样式添加到您的脑海中，看看是否适合您。

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

随意更改您需要的样式。

编辑
我刚刚注意到您将事件侦听器附加到 div 而不是单选按钮。当您单击 div 而不是按钮时，这将更改背景。看到这个更新的小提琴。

于 2013-10-04T18:42:29.337 回答
0 
function changeClass(elem){
    var currentClass = elem.className, blueClass = "switch switch-blue", 
        redClass= "switch switch-red"
    elem.className = (currentClass == blueClass) ? redClass:blueClass;
} 

window.onload = function()
{
        document.getElementById("switcher").onclick = function(){
           changeClass(this);
        };
}

JS 小提琴：http: //jsfiddle.net/dYt8v/

于 2013-10-04T18:45:12.620 回答