1

嗨，我很难找出正确的方法来做到这一点，但这里有。我有 3 个问题，每个问题都有正确答案。

<div class="question">
    <h2>Question 1</h2>
    <p>Which picture has Anna?</p>
    <ul>
        <li><input type="radio" id="q1_a" name="q1"><label for="q1_a">A</label></li>
        <li><input type="radio" id="q1_b" name="q1"><label for="q1_b">B</label></li>
        <li><input type="radio" id="q1_c" name="q1"><label for="q1_c">C</label></li>
        <li><input type="radio" id="q1_d" name="q1"><label for="q1_d">D</label></li>
    </ul>
    <p class="answer"></p>
</div>

<div class="question">
    <h2>Question 2</h2>
    <p>Person?</p>
    <ul>
        <li><input type="radio" id="q2_a" name="q2"><label for="q2_a">A</label></li>
        <li><input type="radio" id="q2_b" name="q2"><label for="q2_b">B</label></li>
        <li><input type="radio" id="q2_c" name="q2"><label for="q2_c">C</label></li>
        <li><input type="radio" id="q2_d" name="q2"><label for="q2_d">D</label></li>
    </ul>
    <p class="answer"></p>
</div>

<div class="question">
    <h2>Question 3</h2>
    <p>Alligator?</p>
    <ul>
        <li><input type="radio" id="q3_a" name="q3"><label for="q3_a">A</label></li>
        <li><input type="radio" id="q3_b" name="q3"><label for="q3_b">B</label></li>
        <li><input type="radio" id="q3_c" name="q3"><label for="q3_c">C</label></li>
        <li><input type="radio" id="q3_d" name="q3"><label for="q3_d">D</label></li>
    </ul>
    <p class="answer"></p>
</div>

对于每组答案，我将两个数组组合成一个大数组。

var incorrect = [
    "Hmmm, are you sure about that?",
    "Almost! Try again.",
    "Give it another shot.",
    "Nice try. Just not quite nice enough.",
    "Not this time.",
    "You might want to check your answer.",
    "Try again!",
    "Oops! Pick again.",
    "So close! Choose again.",
    "D'oh! Choose again.",
    "Keep trying!"
];

var correct =[
    {id:"q1_b",text:"Hi answer",link:"www.yahoo.com"},
    {id:"q2_b",text:"Another good answer!",link:"www.google.com"},
    {id:"q3_b",text:"This is the best answer. ",link:"www.msn.com"}
];

var answers = [];
i = 0;

answers[i] = [incorrect[10],correct[i++],incorrect[0],incorrect[5]];
answers[i] = [incorrect[9],correct[i++],incorrect[0]];
answers[i] = [incorrect[0],correct[i++],incorrect[2]];

answers 数组结合了这两个数组，给出了正确答案的列表以及问题其余部分的正确错误答案。我想要做的是，将答案数组映射到每组问题，这样我就不必使用每个数组，而且我不太确定我会怎么做，因为它是两个不同的数组合二为一。现在我对每个单选按钮都有一些类似的东西：

$('input[type=radio]').click(function(){
    if($(this).attr("checked")){
        var answertext = $(this).closest('div').find('.answer'),
            id = $(this).attr('id'),

        if (id == answers[correct[0]['id']]){
            answertext.html('<span class="green">'+answers[correct[0]['text']]+'</span>');
        } else {
            answertext.html('<span class="red">'+answers[incorrect[0]]+'</span>');
        }

    }
});

除了 if then 语句之外，我还应该使用其他东西吗？任何朝着正确方向的推动将不胜感激。

编辑：编辑了不正确的数组，它有文本，没有，只有正确的答案才能得到文本。编辑：重新措辞问题。

4

1 回答 1

1

在同事的帮助下，我能够解决我的答案。我首先为每个 div 添加一个 num attr ：D

<div class="question" num="1">
<h2>Question 1</h2>
<p>Which picture has Anna?</p>
<ul>
    <li><input type="radio" id="q1_a" name="q1"><label for="q1_a">A</label></li>
    <li><input type="radio" id="q1_b" name="q1"><label for="q1_b">B</label></li>
    <li><input type="radio" id="q1_c" name="q1"><label for="q1_c">C</label></li>
    <li><input type="radio" id="q1_d" name="q1"><label for="q1_d">D</label></li>
</ul>
<p class="answer"></p>
</div>

<div class="question" num="2">
<h2>Question 2</h2>
<p>Person?</p>
<ul>
    <li><input type="radio" id="q2_a" name="q2"><label for="q2_a">A</label></li>
    <li><input type="radio" id="q2_b" name="q2"><label for="q2_b">B</label></li>
    <li><input type="radio" id="q2_c" name="q2"><label for="q2_c">C</label></li>
    <li><input type="radio" id="q2_d" name="q2"><label for="q2_d">D</label></li>
</ul>
<p class="answer"></p>
</div>

<div class="question" num="3">
<h2>Question 3</h2>
<p>Alligator?</p>
<ul>
    <li><input type="radio" id="q3_a" name="q3"><label for="q3_a">A</label></li>
    <li><input type="radio" id="q3_b" name="q3"><label for="q3_b">B</label></li>
    <li><input type="radio" id="q3_c" name="q3"><label for="q3_c">C</label></li>
    <li><input type="radio" id="q3_d" name="q3"><label for="q3_d">D</label></li>
</ul>
<p class="answer"></p>
</div>

然后我创建了这个来获取索引和数字。 

el = $(this).parent().index();
q = $(this).parent().parent().parent().attr("num");
resp = answers[q][el];

我还更新了正确的数组以使其更简单：

var correct =[
{text:"Hi answer"},
{text:"Another good answer!"},
{text:"This is the best answer."}
];

答案数组和不正确的保持不变。

但请注意：如果问题有多个答案，则使用迭代（例如 i++ 每行更改的地方）不起作用。如果确实如此，则需要这样编写答案数组：

answers[i++] = [incorrect[10],correct[0],incorrect[0],incorrect[5]];
answers[i++] = [incorrect[9],correct[1],incorrect[0]];
answers[i++] = [incorrect[0],correct[2],incorrect[2]];

最后我更新了单选按钮上的点击事件，如下所示：

$('input[type=radio]').click(function(){
if($(this).attr("checked")){
    var answer = $(this).closest('div').find('.answer'),
        id = $(this).attr('id'),

        el_number = $(this).parent().index();
    q_number = $(this).parent().parent().parent().attr("num");
    resp = answers[q_number][el_number];



    answer.html('<span>' + (resp["text"] != null) ? resp["text"] : resp + '</span>');

}
});

这似乎奏效了。:D

于 2013-02-19T16:24:24.333 回答