个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我需要将表单中的答案标记为正确或错误。在我到达这里的一些帮助下，我想出了如何针对第一个问题这样做，但现在我正在努力将它应用于其他问题。这是我的代码:
<head>
<style type="text/css">
.wrong {width:250px ;border:1px solid #ff0000; border-style:solid; }
.right {width:250px; border:1px solid #00ff00; border-style:solid; }
</style>
</head>
<body>
<form id="office">
<label id="ques1"> question 1</label>
<div class="q1 q1a1"><input type="radio" name="question1" value="q1a1" /> Answer1 <br/></div>
<div class="q1 q1a2"><input type="radio" name="question1" value="q1a2" /> Answer2 <br/></div>
<div class="q1 q1a3"><input type="radio" name="question1" value="q1a3" /> Answer3 <br/></div>
<div class="q1 q1a4"><input type="radio" name="question1" value="q1a4" /> Answer4 <br/></div>
<br/><br/>
<label> question 2</label>
<div class="q2 q2a1"><input type="radio" name="question2" value="q2a1"/> Answer1 <br/></div>
<div class="q2 q2a2"><input type="radio" name="question2" value="q2a2"/> Answer2 <br/></div>
<div class="q2 q2a3"><input type="radio" name="question2" value="q2a3"/> Answer3 <br/></div>
<div class="q2 q2a4"><input type="radio" name="question2" value="q2a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 3</label>
<div class="q3 q3a1"><input type="radio" name="question3" value="q3a1"/> Answer1 <br/></div>
<div class="q3 q3a1"><input type="radio" name="question3" value="q3a2"/> Answer2 <br/></div>
<div class="q3 q3a1"><input type="radio" name="question3" value="q3a3"/> Answer3 <br/></div>
<div class="q3 q3a1"><input type="radio" name="question3" value="q3a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 4</label>
<div class="q4 q4a1"><input type="radio" name="question4" value="q4a1"/> Answer1 <br/></div>
<div class="q4 q4a2"><input type="radio" name="question4" value="q4a2"/> Answer2 <br/></div>
<div class="q4 q4a2"><input type="radio" name="question4" value="q4a3"/> Answer3 <br/></div>
<div class="q4 q4a4"><input type="radio" name="question4" value="q4a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 5</label>
<div class="q5 q5a1"><input type="radio" name="question5" value="q5a1"/> Answer1 <br/></div>
<div class="q5 q5a2"><input type="radio" name="question5" value="q5a2"/> Answer2 <br/></div>
<div class="q5 q5a3"><input type="radio" name="question5" value="q5a3"/> Answer3 <br/></div>
<div class="q5 q5a4"><input type="radio" name="question5" value="q5a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 6</label>
<div class="q6 q6a1"><input type="radio" name="question6" value="q6a1"/> Answer1 <br/></div>
<div class="q6 q6a2"><input type="radio" name="question6" value="q6a2"/> Answer2 <br/></div>
<div class="q6 q6a3"><input type="radio" name="question6" value="q6a3"/> Answer3 <br/></div>
<div class="q6 q6a4"><input type="radio" name="question6" value="q6a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 7</label>
<div class="q7 q7a1"><input type="radio" name="question7" value="q7a1"/> Answer1 <br/></div>
<div class="q7 q7a2"><input type="radio" name="question7" value="q7a2"/> Answer2 <br/></div>
<div class="q7 q7a3"><input type="radio" name="question7" value="q7a3"/> Answer3 <br/></div>
<div class="q7 q7a4"><input type="radio" name="question7" value="q7a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 8</label>
<div class="q8 q8a1"><input type="radio" name="question8" value="q8a1"/> Answer1 <br/></div>
<div class="q8 q8a2"><input type="radio" name="question8" value="q8a2"/> Answer2 <br/></div>
<div class="q8 q8a3"><input type="radio" name="question8" value="q8a3"/> Answer3 <br/></div>
<div class="q8 q8a4"><input type="radio" name="question8" value="q8a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 9</label>
<div class="q9 q9a1"><input type="radio" name="question9" value="q9a1"/> Answer1 <br/></div>
<div class="q9 q9a2"><input type="radio" name="question9" value="q9a2"/> Answer2 <br/></div>
<div class="q9 q9a3"><input type="radio" name="question9" value="q9a3"/> Answer3 <br/></div>
<div class="q9 q9a4"><input type="radio" name="question9" value="q9a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 10</label>
<div class="q10 q10a1"><input type="radio" name="question10" value="q10a1"/> Answer1 <br/></div>
<div class="q10 q10a2"><input type="radio" name="question10" value="q10a2"/> Answer2 <br/></div>
<div class="q10 q10a3"><input type="radio" name="question10" value="q10a3"/> Answer3 <br/></div>
<div class="q10 q10a4"><input type="radio" name="question10" value="q10a4"/> Answer4 <br/></div>
<br/><br/>
<input type="button" id="submit" name="submitAnswers" value="Submit Your Answers" onclick="checkFunction()" />
</form>
<script type="text/javascript">
function checkFunction() {
var checked = document.querySelectorAll('input[type="radio"]:checked');
var div = document.querySelectorAll('div.'+checked[0].value);
console.dir(checked[0]);
if (checked[0].value === 'q1a3') {
div[0].classList.add('right')
} else {
div[0].classList.add('wrong')
}
};
</script>
</body>
</html>
有人可以帮忙吗？
我不太明白 [0] 的含义以及接下来如何使用它。此外，div 变量和“div”的含义是什么。在查询选择器中。
非常感谢!!
最佳答案
尝试 for 循环。首先为每个问题的正确答案添加一个类correctAnswer。例如，如果第一个 div 的正确答案是第三个答案，则在 value 属性之后添加代码 class="correctAnswer"。
将类添加到每个正确答案后，使用以下 JavaScript:
function checkFunction() {
var checked = document.querySelectorAll('input[type="radio"]:checked');
for(i = 0; i < checked.length; i++){
var div = document.querySelectorAll('div.'+checked[i].value);
if (checked[i].classList.contains('correctAnswer')) {
div[0].classList.add('right')
} else {
div[0].classList.add('wrong')
}
}
};
checked[0] 基本上意味着您正在从找到的元素数组中选择第一个元素。所以 checked[1] 意味着您正在选择第二个元素，checked[2] 意味着您正在选择第三个元素，依此类推。
关于javascript - 使用数组检查单选形式的多个答案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33971800/
25
4
0
(function() { main(); function main() { jQuery(document).ready(function($) {
所以我必须为我们的类(class)软件设计制作一个 GUI，我们正在为 children 制作一个游戏来练习乘法表。到目前为止，当您执行一次测试或练习时它工作正常，但是当您进行第二次运行时，它会出错。
我刚开始学习 python，想做一些琐事。基本上，我想从列表中随机询问一个问题，然后使用“输入”运算符来判断用户输入的 Y/N 是否正确。我坚持确定如何检查它是否正确。也许我的(不正确的)代码可以更好
我目前正在做一个暑期实习项目，我必须制作一个不经意的 DNS 翻译服务器。我不会在这里详细讨论被忽视的部分，但我会解释我的程序的架构。 有一个服务器端接收混淆的请求并发回一个它自己无法理解的答案。 在
我想用ajax请求翻译单词到谷歌翻译 如果我使用 curl，它会像: curl_init("http://translate.google.com/translate_a/t?client=t&tex
这是我运行dig www.google.com时的答案部分: ;; ANSWER SECTION: www.google.com. 108 IN A 74
我在ES上有以下简单数据: curl -XPUT localhost:9200/dt/art/1 -d '{ "age": 77 }' curl -XPUT localhost:9200/dt/art
我从编码开始，我有一个多维数组的示例。但它没有给出预期的答案。 我只得到“C”，我期待“JohnnyCash:Live at Folsom Prison”。出了什么问题？ var music = []
我们有一个应用程序与 Crashlytic 和 Answers 配合得很好。我们需要为这个应用程序做一个不同的风格。因此，我们的 Gradle 编译工作正常，并为两个不同的品牌制作了两个不同的 APK
我正在尝试从数据库获取歌曲列表。 我在查询行中发送一个 ID 数组(永久链接)，并且我希望返回值的顺序与我在数组中给出的顺序相同。有没有办法做到这一点？ function getByPermalink
我有一个表单可以输入这样的值 test 有没有办法用jquery改变输入类型 我基本上想把这个添加到输入类型中 data-slider="true" data-sl
好吧，我距离数学高手还很远。哎呀，我记住了足够多的高中代数，可以拼凑出任何有效的公式，这对我来说是一个胜利。因此，如果您注意到这里有一个不必要的长或令人困惑的公式，那就可以解释了。 但是，正如人们可以
所以我的问题有点令人困惑，但仍然如此。我从外部源获取一个由 8 个字符串组成的数组，其中所有字符串都包含 double 值。这些值通常为小数点后 4 位: 12345.5678 我想做的是将其转换为小
我成功地构建了一个函数来提示用户提出问题，然后是随机排列的答案选项。但是，由于答案选择现在是随机的，python 如何识别用户输入(数字:1、2、3 或 4)以获得“正确”答案？ import ran
我正在尝试使用蛮力来回答这个问题，这样我就可以理解发生了什么: https://www.interviewcake.com/question/java/product-of-other-numbers
尝试使用刚刚宣布的 Answers OSX平台框架: pod 'Fabric' pod 'Answers' pod 'Crashlytics' #import #import #import [
在我添加的页面上检索忘记的用户名 步骤 1) 输入电子邮件地址(通过电子邮件获取帐户) 第 2 步)验证安全问题(他们提供答案，我对其进行验证) 第 3 步)向他们发送带有用户名的电子邮件 第 2 步
已关闭。这个问题是 off-topic 。目前不接受答案。 想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。 已关闭10 年前。 Improve th
在我的测试中，我需要模拟一种情况，当使用实体管理器(em)将新对象保存到数据库中时，在此过程中，该对象的id属性设置为数据库中该行的自动递增ID。我想将该id属性设置为我自己的值，以便稍后在测试中进行
我有这个代码。调用askToContinue() 方法来询问用户是否要继续，但我的问题是它只是忽略选择并重新启动程序，无论我输入什么。我在代码中遗漏了什么导致它忽略我的选择？ public class
我是一名优秀的程序员,十分优秀！