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

Question

I currently have a drag and drop interface that allows an answer to be dragged into a 'destinationBox' and it will mark the answer correct or incorrect. It does this by matching the questions ID to the answers Class - see code below

<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);
    });
}

The problem is, I need to have more than one answer per question. Currently if I give two answers the same class of a1 it only shows the first one as being correct. From my understanding this is because my code is looking through the HTML to find the matching class and once it has found one it stops and doesn't carry on looking for any other matching classes. I'm quite new to JavaScript/jQuery and am at a bit of a loss on where to go now. Any help is greatly appreciated!

codepen.io/anon/pen/GpYPRK

Answer 1

Not sure if this would work, as already mentioned a fiddle would help. Try changing this line

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

To this

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

Answer 2

If I have understood correctly then all the answers to your question 'q1' would be in different div tags with class a1. So in that case what you can do is first find all the a1's. Then for each a1 find the innerHtml and store it in an array. So you will have all the answers in an array.

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
});

I have not tested this code so there may be syntax errors but the logic should give you some idea.