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

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() {  

    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");

    }

})));

.clearfix::before {

    content: "";

    display: table;

}

.clearfix::after {

    content: "";

    display: table;

    clear: both;

}

.choice {

  display: inline-block;

  position: relative;

  cursor: pointer;

  font-size: 25px;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  width: 49%;

}

.choice input {

  position: absolute;

  opacity: 0;

  cursor: pointer;

}

.choice > .checkmark {

  position: relative;

  display: block;

  padding: 10px;

  background-color: #eee;

}

.choice:hover input ~ .checkmark {

  background-color: #ccc;

}

.choice input:checked ~ .checkmark {

  background-color: #2196F3;

}

label.choice,

.choice_arrow {

    float: left;

    width: 30%;

}

.choice_arrow {

    width: 20%;

    background: #f00;

    position: relative;

    height: 48px;

    border-radius: 30px;

    border: 1px solid #ccc;

}

.choice_arrow > .bullet {

    border-radius: 50%;

    width: 43px;

    height: 43px;

    position: absolute;

    background: #ff0;

    border: 1px solid #ccc;

    top: 1px;

}

.choice_arrow > .bullet > span {

    font-size: 30px;

    margin-top: 7px;

    margin-left: 7px;

}

#wrapper.leftChoice .choice_arrow .bullet { left: 2px; transform: rotate(0deg); }

#wrapper.rightChoice .choice_arrow .bullet  { right: 2px; transform: rotate(180deg); }

<div id="wrapper" class="clearfix">

  <label class="choice">

    <input type="radio" id="choice1" checked="checked" name="choices" value="one">

    <span class="checkmark">Choice 1</span>

  </label>

  <div class="choice_arrow">

    <div class="bullet">

      <span class="fa fa-chevron-left"></span>

    </div>

  </div>

  <label class="choice">

    <input type="radio" id="choice2" name="choices" value="two">

    <span class="checkmark">Choice 2</span>

  </label>

</div>