根据选中的收音机切换课程

Question

根据检查哪个收音机，我想切换两个类“leftChoice”和“rightChoice”不幸的是代码不起作用。我试图在没有 jQuery 的情况下使用纯 JS。也许有更简单的方法来获得结果。

var wrapper = document.getElementById('wrapper');

var choices = document.getElementsByName("choices");

var checkedChoice = "";

wrapper.classList.remove("rightChoice");

wrapper.classList.add("leftChoice");

choices.onchange(function() {  

    for (var i = 0, length = choices.length; i < length; i++) {

        if (choices[i].checked) {

            checkedChoice = choices[i].value;

            break;

        }

    } 

    if(checkedChoice == "one"){   

        wrapper.classList.remove("rightChoice");

        wrapper.classList.add("leftChoice");

    }

    else if(checkedChoice == "two"){

        wrapper.classList.remove("leftChoice");

        wrapper.classList.add("rightChoice");

    }

});

https://jsfiddle.net/Lo6pzn1a/

Answer 1

修复了问题。在纯 JS 中，您必须分别在每个元素上添加事件监听器。小提琴链接：https ://jsfiddle.net/561x90k4/var wrapper = document.getElementById('wrapper');var choices = document.getElementsByName("choices");var checkedChoice = "";wrapper.classList.remove("rightChoice");wrapper.classList.add("leftChoice");choices.forEach(item => item.addEventListener('change',(function() {&nbsp;&nbsp;&nbsp; &nbsp; for (var i = 0, length = choices.length; i < length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; if (choices[i].checked) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checkedChoice = choices[i].value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; if(checkedChoice == "one"){&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; wrapper.classList.remove("rightChoice");&nbsp; &nbsp; &nbsp; &nbsp; wrapper.classList.add("leftChoice");&nbsp; &nbsp; }&nbsp; &nbsp; else if(checkedChoice == "two"){&nbsp; &nbsp; &nbsp; &nbsp; wrapper.classList.remove("leftChoice");&nbsp; &nbsp; &nbsp; &nbsp; wrapper.classList.add("rightChoice");&nbsp; &nbsp; }})));.clearfix::before {&nbsp; &nbsp; content: "";&nbsp; &nbsp; display: table;}.clearfix::after {&nbsp; &nbsp; content: "";&nbsp; &nbsp; display: table;&nbsp; &nbsp; clear: both;}.choice {&nbsp; display: inline-block;&nbsp; position: relative;&nbsp; cursor: pointer;&nbsp; font-size: 25px;&nbsp; -webkit-user-select: none;&nbsp; -moz-user-select: none;&nbsp; -ms-user-select: none;&nbsp; user-select: none;&nbsp; width: 49%;}.choice input {&nbsp; position: absolute;&nbsp; opacity: 0;&nbsp; cursor: pointer;}.choice > .checkmark {&nbsp; position: relative;&nbsp; display: block;&nbsp; padding: 10px;&nbsp; background-color: #eee;}.choice:hover input ~ .checkmark {&nbsp; background-color: #ccc;}.choice input:checked ~ .checkmark {&nbsp; background-color: #2196F3;}label.choice,.choice_arrow {&nbsp; &nbsp; float: left;&nbsp; &nbsp; width: 30%;}.choice_arrow {&nbsp; &nbsp; width: 20%;&nbsp; &nbsp; background: #f00;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; height: 48px;&nbsp; &nbsp; border-radius: 30px;&nbsp; &nbsp; border: 1px solid #ccc;}.choice_arrow > .bullet {&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; width: 43px;&nbsp; &nbsp; height: 43px;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; background: #ff0;&nbsp; &nbsp; border: 1px solid #ccc;&nbsp; &nbsp; top: 1px;}.choice_arrow > .bullet > span {&nbsp; &nbsp; font-size: 30px;&nbsp; &nbsp; margin-top: 7px;&nbsp; &nbsp; margin-left: 7px;}#wrapper.leftChoice .choice_arrow .bullet { left: 2px; transform: rotate(0deg); }#wrapper.rightChoice .choice_arrow .bullet&nbsp; { right: 2px; transform: rotate(180deg); }<div id="wrapper" class="clearfix">&nbsp; <label class="choice">&nbsp; &nbsp; <input type="radio" id="choice1" checked="checked" name="choices" value="one">&nbsp; &nbsp; <span class="checkmark">Choice 1</span>&nbsp; </label>&nbsp; <div class="choice_arrow">&nbsp; &nbsp; <div class="bullet">&nbsp; &nbsp; &nbsp; <span class="fa fa-chevron-left"></span>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <label class="choice">&nbsp; &nbsp; <input type="radio" id="choice2" name="choices" value="two">&nbsp; &nbsp; <span class="checkmark">Choice 2</span>&nbsp; </label></div>