2 回答

TA貢獻(xiàn)1966條經(jīng)驗(yàn) 獲得超4個(gè)贊
在當(dāng)前的代碼中,您附加htmls了兩個(gè)不同的變量,這就是結(jié)果單獨(dú)出現(xiàn)的原因。相反,您可以附加divs一個(gè)變量并根據(jù)該變量修改您的代碼。
演示代碼:
var questionList = '';
var scenario_question = [{
"id": 16,
"questions": "Who is this message for?",
"duration": 60,
"choices": [{
"id": 61,
"question_id": 16,
"choice": "guests"
},
{
"id": 62,
"question_id": 16,
"choice": "Eskaya"
},
{
"id": 63,
"question_id": 16,
"choice": "local artists"
},
{
"id": 64,
"question_id": 16,
"choice": "conference attendees"
}
]
},
{
"id": 17,
"questions": "What is displayed in the lobby? ",
"duration": 60,
"choices": [{
"id": 65,
"question_id": 17,
"choice": "plush furniture"
},
{
"id": 66,
"question_id": 17,
"choice": "the 24-hour restaurant"
},
{
"id": 67,
"question_id": 17,
"choice": "the main conference rooms"
},
{
"id": 68,
"question_id": 17,
"choice": "art from various local artists "
}
]
},
{
"id": 18,
"questions": "What type of establishment is Eskaya?",
"duration": 60,
"choices": [{
"id": 69,
"question_id": 18,
"choice": "a hotel"
},
{
"id": 70,
"question_id": 18,
"choice": "a pool area"
},
{
"id": 71,
"question_id": 18,
"choice": "a restaurant"
},
{
"id": 72,
"question_id": 18,
"choice": "a conference center"
}
]
}
]
//loop through json array
$(scenario_question).each(function(index, value) {
//append value (questions)
questionList += '<div class="display_question_scenario">' + (index + 1) + "." + " " + value.questions
//create divs
questionList += '<div id="question_choices" class="listening_question_choice">'
var count = index + 1;
$(value.choices).each(function(index, value) {
//append choices
questionList += '<input type="radio" name="answer_choice' + count + '" value="' + value.id + '"><label>' + value.choice + '</label><br>';
})
//close div
questionList += '</div></div>'
})
$('.listening_question_scenario').html(questionList);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="listening_choices_wrapper">
<div class="listening_question_scenario">
<div id="display_question_scenario">
</div>
</div>
</div>

TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個(gè)贊
var s = [{
"id": 16,
"question": "Who is this message for?",
"duration": 60,
"choices": [{
"id": 61,
"question_id": 16,
"choice": "guests"
},
{
"id": 62,
"question_id": 16,
"choice": "Eskaya"
},
{
"id": 63,
"question_id": 16,
"choice": "local artists"
},
{
"id": 64,
"question_id": 16,
"choice": "conference attendees"
}
]
},
{
"id": 17,
"question": "What is displayed in the lobby? ",
"duration": 60,
"choices": [{
"id": 65,
"question_id": 17,
"choice": "plush furniture"
},
{
"id": 66,
"question_id": 17,
"choice": "the 24-hour restaurant"
},
{
"id": 67,
"question_id": 17,
"choice": "the main conference rooms"
},
{
"id": 68,
"question_id": 17,
"choice": "art from various local artists "
}
]
},
{
"id": 18,
"question": "What type of establishment is Eskaya?",
"duration": 60,
"choices": [{
"id": 69,
"question_id": 18,
"choice": "a hotel"
},
{
"id": 70,
"question_id": 18,
"choice": "a pool area"
},
{
"id": 71,
"question_id": 18,
"choice": "a restaurant"
},
{
"id": 72,
"question_id": 18,
"choice": "a conference center"
}
]
}
]
var questionList = '';
for (let i = 0; i < s.length; i++) {
questionList = questionList + '<p id="display_question_scenario">' + (i + 1) + "." + " " + s[i].question;
for (let x = 0; x < s[i].choices.length; x++) {
questionList = questionList + '<input type="radio" name="answer_choice" value="' + s[i].choices[x].id + '"><label>' + s[i].choices[x].choice + '</label>';
}
}
questionList += '</p>'
$('.listening_question_scenario').html(questionList);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="listening_choices_wrapper">
<div class="listening_question_scenario">
<p id="display_question_scenario">
</p>
</div>
<div id="question_choices" class="listening_question_choice">
</div>
</div>
添加回答
舉報(bào)