javascript - jQuery Quiz 比较数组中的正确答案

Question

我的 HTML

<div class="questions">
    <p>Q1</p>
    <label><input name="q1" id="q1-a" type="radio" />Q1 ans A</label>
    <label><input name="q1" id="q1-b" type="radio" />Q1 ans B</label>
    <label><input name="q1" id="q1-c" type="radio" />Q1 ans C</label>
</div>

<div class="questions hide">
    <p>Q2</p>
    <label><input name="q2" id="q1-a" type="radio" />Q2 ans A</label>
    <label><input name="q2" id="q1-b" type="radio" />Q2 ans B</label>
    <label><input name="q2" id="q1-c" type="radio" />Q2 ans C</label>
</div>

<div class="questions hide">
    <p>Q3</p>
    <label><input name="q3" id="q1-a" type="radio" />Q3 ans A</label>
    <label><input name="q3" id="q1-b" type="radio" />Q3 ans B</label>
    <label><input name="q3" id="q1-c" type="radio" />Q3 ans C</label>
</div>
<a href="#" id="checkAns">Check</a>

我的 JS

$("#checkAns").click(function(){

}

这是我要比较的答案数组

answers: { q1: 'a', q2: 'b', q3: 'a'}

如果用户触发单选按钮然后它会显示警报如果是正确或错误然后它会返回真；如果错了 false 那么这是时候它会显示另一个问题来回答

我确实想避免 if else 检查用户答案是否可行？

Answer 1

首先，不要忘记为每个单选按钮添加值。另外 id 这里并不是真正需要的，除非你需要在每个单选按钮上做一些事情:

<div>
    <label><input name="q1" type="radio" value="a" />Q1 A</label>
    <label><input name="q1" type="radio" value="b" />Q1 B</label>
    <label><input name="q1" type="radio" value="c" />Q1 C</label>
</div>

然后为了检查答案，你可以使用这个:

var answers = {q1 : 'a', q2 : 'b', q3 : 'a'};

$('#checkAns').click(function(e) {
    $.each(answers, function(question, answer) {
        if($('input:radio[name="' + question + '"]:checked').val() == answer)
            alert(question + ': True');
        else
            alert(question + ': False!');
    });
    e.preventDefault();
});

---

更新的答案:

HTML 和 CSS

我认为您不需要 anchor 即可单击，因为这次脚本会在触发单选按钮后立即检查答案。

<style type="text/css">
    .hide { display:none; }
</style>

<div class="questions">
    <p>Q1</p>
    <label><input type="radio" name="q1" value="a" />Q1 A</label>
    <label><input type="radio" name="q1" value="b" />Q1 B</label>
    <label><input type="radio" name="q1" value="c" />Q1 C</label>
</div>

<div class="questions hide">
    <p>Q2</p>
    <label><input type="radio" name="q2" value="a" />Q2 A</label>
    <label><input type="radio" name="q2" value="b" />Q2 B</label>
    <label><input type="radio" name="q2" value="c" />Q2 C</label>
</div>

<div class="questions hide">
    <p>Q3</p>
    <label><input type="radio" name="q3" value="a" />Q3 A</label>
    <label><input type="radio" name="q3" value="b" />Q3 B</label>
    <label><input type="radio" name="q3" value="c" />Q3 C</label>
</div>

使用 jQuery 的 Javascript

var answers = {q1: 'a', q2: 'b', q3: 'a'};

$('input:radio').click(function() {
    var container = $(this).parents('div');
    var question = $(this).attr('name');
    var answer = $(this).val();

    alert(answers[question] == answer);

    container.addClass('hide');
    container.next().removeClass('hide');
});

只需根据需要修改脚本即可。希望这次是对的.. :P