使用 JavaScript 中的选择器更改类
发布于2024-11-25 20:09 阅读(763) 评论(0) 点赞(1) 收藏(0)
我是网络编程的新手，我一直在尝试做一个真/假测试，当提交答案时，答案会根据正确与否而改变颜色。
起初，我为每个输入使用了标签：
<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 来更改颜色。它确实会更改颜色，但仅限于单选按钮的颜色，并且未选中时，这正是我想要做的。这是因为我不知道如何选择精确的 input[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");
}
}
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/537207/b75d8c7845bd28bae492/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力