[英]Change a class with a selector using javascript
我是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中的选择器修改类的样式? 同样,如果用户决定更改其问题答案,则被检查者必须返回到中性色。
谢谢您的帮助。
您可以使用此功能来更改元素的类,如前所述。 但是,如果不使用第三方插件或自定义元素,则无法更改复选框的颜色。 请检查此链接
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");
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.