```
var questlist=[];
while (questlist.length<3){
var nextnumb=Math.floor(Math.random()*3) 1;
var check=questlist.includes(nextnumb);
if (check==false){
questlist.push(nextnumb);
}
}
console.log(questlist);
var i=0;
$(".start").click(function(){
$(".q" questlist[i]).removeClass("hide");
$(".start").addClass("hide");
});
$(".next").click(function(){
$("body").removeAttr("class");
$(".q" questlist[i]).addClass("hide");
i ;
$(".q" questlist[i]).removeClass("hide");
$(".next").addClass("hide");
console.log(questlist[i]);
});
$(document).on("click",".submit", answer);
function answer() {
if ($(".true").is(":checked")){
$("body").attr("class","true");
$(".next").removeClass("hide");
}else if ($(".false").is(":checked")){
$("body").attr("class","false");
}else{
alert("chose the answer");
}
}
``````
.true{
background-color: lightgreen;
}
.false{
background-color: red;
}
.hide{
display: none;
}
``````
<body>
<button type="button" class="start" name="btn-start">Start</button>
<div class="container">
<div class="question q1 hide">2 2
<div class="answer an1">
<input type="radio" name="q1" class="ans false">1
<input type="radio" name="q1" class="ans true">4
<input type="radio" name="q1" class="ans false">3
<input type="radio" name="q1" class="ans false">2<br>
<button type="submit" name="Submit" class="submit">Submit</button>
<button type="button" class="next hide" name="next">Next</button>
</div>
</div>
<div class="question q2 hide">2 3
<div class="answer an2">
<input type="radio" name="q2" class="ans false">1
<input type="radio" name="q2" class="ans false">4
<input type="radio" name="q2" class="ans true">5
<input type="radio" name="q2" class="ans false">2<br>
<button type="submit" name="Submit" class="submit">Submit</button>
<button type="button" class="next hide" name="next">Next</button>
</div>
</div>
<div class="question q3 hide">2 4
<div class="answer an3">
<input type="radio" name="q3" class="ans true">6
<input type="radio" name="q3" class="ans false">4
<input type="radio" name="q3" class="ans false">3
<input type="radio" name="q3" class="ans false">2<br>
<button type="submit" name="Submit" class="submit">Submit</button>
<button type="button" class="next hide" name="next">Next</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="quiz.js"></script>
</body>
```第一個數字的回答功能是正常的，但是下一個問題，如果我選擇了錯誤的答案，我在第一個數字中選擇了正確的答案后，身體仍然變成綠色，并且仍然出現下一個按鈕。當我重新加載 html 時，仍然選中單選按鈕，為什么所有這些都會發生？
uj5u.com熱心網友回復：
發生這種情況的原因是，您試圖在 if 陳述句中使類為真。jQuery 每次都會嘗試獲取類為 true 的第一個元素。因此它總是只檢查類為真的第一個元素。解決它的一種方法是檢測單擊事件父級并找到類為 true 的子級，并由該子級進行驗證。
function answer(e) {
let rightAnswer = $(e.target).parent().find('.true')
if (rightAnswer.is(":checked")){
$("body").attr("class","true");
$(".next").removeClass("hide");
}else if ($(".false").is(":checked")){
$("body").attr("class","false");
}else{
alert("chose the answer");
}
}
作業示例-codepen。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493642.html
標籤：javascript jQuery if 语句 单选按钮