javascript - 使用 javascript 使用选择器更改类
问题描述
我是网络编程的新手,我一直在尝试做一个真/假测试,当提交答案时,答案会根据它是否正确而改变颜色。
起初,我为每个输入使用标签:
<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] + label”或“input[value=Non] +label”和“背景颜色:蓝色”,在JS中,我使用了label[i].style .background 改变颜色。它确实改变了颜色,但只改变了单选按钮的颜色,当没有选中时,这正是我想要做的。这是因为我不知道如何选择精确输入的标签[x=y]:选择器。
所以我重写了整件事,没有任何标签
<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");
}
}
推荐阅读
- simulation - Anylogic:增加摄像头覆盖的距离
- sql - 在 Redshift 中按秒创建时间戳列表
- java - 为什么 keyclock 显示错误“您已在此会话中作为不同的用户 '0000000021' 进行身份验证。请先注销。”?
- react-native - 反应原生长列表非常慢(使用联系人包时)
- node.js - 如何在更新另一个文档的基础上更新 FIrestore 中的其他文档?
- javascript - Chart.js:如何对数据集的图例进行分组?所以一个切换多个数据集?
- javascript - NodeJS 中的 CAS 身份验证
- php - imagecolorallocate():红色组件超出范围获取验证码图像时出错
- python - 多线程 - 网络抓取 - Python
- java - Android:Java阻止所有输入,除了使用透明视图上下滚动