Question

我是Web编程的新手，我一直在尝试做一个对/错测试，提交答案时，答案的颜色会根据正确与否而改变。

首先，我为每个输入使用标签：

<h3>1. Father Christmas and Santa Claus are the same man</h3>
     <input type="radio" id="1bon" name="q1" value="Non" >  
          <label for="1bon" > True </label> <!-- label is for css -->
     <input type="radio" id="1non" name="q1" value="Bon">
          <label for="1non"  > False </label><br/>

在CSS中，我使用“ input [value = Bon] +标签”或“ input [value = Non] + label”和“背景色：蓝色”，在JS中，我使用label [i ] .style.background更改颜色。它确实会更改颜色，但只会更改单选按钮的颜色，并且在未选中时会更改颜色，这正是我要尝试执行的操作。这是因为我不知道如何选择精确输入[x = y]：selector的标签。

所以我重写了整个内容，没有任何标签

<h3>1. Father Christmas and Santa Claus are the same man </h3>       
     <input type="radio" class="input" id="1bon" name="q1" value="Non">  True 
     <input type="radio" class="input" id="1non" name="q1" value="Bon"> False

使用新的CSS：

.input {
background-color: #fff;
display:inline-block;
width:5%;
padding:10px;
border:1px solid #ddd;
margin-bottom:10px;
cursor:pointer; /* new selectoon type */
}
.input:checked{
background-color: #4876ff;
}

因此，当刚刚选中时，它是蓝色，但是当提交答案时，根据输入的值，它会更改类的颜色：选中。

有没有办法用javascript中的选择器修改类的样式？另外，如果用户决定更改其问题的答案，则选中的对象必须恢复为中性色。

谢谢您的帮助。

Answer 1

您可以使用此函数来更改元素的类，如前所述。但是，如果不使用第三方插件或自定义元素，则无法更改复选框的颜色。请检查此link

function Test2($this){
var radios = document.getElementsByName('q1');
for(i=0; i< radios.length; i++){
    var element = radios[i];
    element.classList.remove("correctAnswer");
    element.classList.remove("wrongAnswer");
}
if($this.value === "Non"){//Assume "Non" is correct answer
$this.classList.add("correctAnswer");
}else{
$this.classList.add("wrongAnswer");
}
}

使用javascript使用选择器更改类

1 个答案: