jQuery 拖放测验 - 有多个拖放答案

Question

我目前有一个拖放界面，允许将答案拖到“目标框”中，它会标记答案正确或不正确。它通过将问题 ID 与答案类匹配来做到这一点 - 请参见下面的代码

<div class="question textbox" id="q1">
    1. Assemble the Crisis Management Team
</div>
<div class="destinationBox"></div>

<td>
    <div class="dragDropSmallBox answer a1">0123456789</div>
</td>

// initialisation for all things regarding questions.
function init_questions() {
    questionList = Array();

    $(".question").each(function(index) {
        // find questions and assign answers to them
        var question = new Question(this);
        question.body = this.innerHTML;
        //get id of question
        var id = $(this).attr('id');
        //replace 'q' in ID with 'a' instead
        var number = id.replace(/q/g, 'a');
        var answer = $('.' + number).html();
        question.answers.push(answer);
        questionList.push(question);
    });
}

问题是，每个问题我需要有多个答案。目前，如果我在a1 的同一类中给出两个答案，它只会显示第一个是正确的。据我了解，这是因为我的代码正在浏览 HTML 以查找匹配的类，一旦找到匹配的类，它就会停止并且不会继续寻找任何其他匹配的类。我对 JavaScript/jQuery 很陌生，现在不知道该去哪里。任何帮助是极大的赞赏！

codepen.io/anon/pen/GpYPRK

Answer 1

不确定这是否可行，正如已经提到的那样，小提琴会有所帮助。尝试更改此行

 var answer = $('.' + number).html();

到这里

var answer = $(index).find('.' + number + ':first()').html();

Answer 2

如果我理解正确，那么对您的问题“q1”的所有答案都将位于 a1 类的不同 div 标签中。因此，在这种情况下，您可以首先找到所有 a1。然后为每个 a1 找到 innerHtml 并将其存储在一个数组中。因此，您将在一个数组中获得所有答案。

var answers = $('.' + number); 
answers.each(function(){
  var answer = $(this).html();
  //now you can store this answer in an array say "arr"
  arr.push(answer);
  //Rest of your logic
});

我没有测试过这段代码，所以可能有语法错误，但逻辑应该会给你一些想法。