Question

嗨，我很难找到正确的方法来做到这一点，但是这里有。我有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语句之外的东西？任何正确方向的推动都将非常感激。

编辑：编辑了错误的数组，它有文本，但没有，只有正确的答案才能得到文本。编辑：重写问题。

Answer 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]];

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

$('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

将jquery数组映射到单选按钮

1 个答案: