我有以下JSON：
var questions = {
section: {
"1": question: {
"1": {
"id" : "1a",
"title": "This is question1a"
},
"2": {
"id" : "1b",
"title": "This is question2a"
}
},
"2": question: {
"1": {
"id" : "2a",
"title": "This is question1a"
},
"2": {
"id" : "2b",
"title": "This is question2a"
}
}
}
};
注意：JSON根据下面的答案进行了更改以更好地支持问题，因为原始JSON格式错误以及它如何与下面的for循环一起使用。
完整的JSON将有8个部分，每个部分将包含15个问题。
这个想法是JS代码将读取要拉出的部分，然后逐一从列表中提取问题。首次加载时，它会提取第一个问题，然后当用户点击选项A或B的按钮时，它会然后加载下一个问题，直到所有问题都被拉出来然后进行回调。
单击附加列表项中的按钮后，它会将其添加到下面的列表中，并将其作为span标记添加到用户提供的答案中。
这是我到目前为止所做的：
function loadQuestion( $section ) {
$.getJSON('questions.json', function (data) {
for (var i = 0; i < data.length; i++) {
var item = data[i];
if (item === $section) {
$('#questions').append('<li id="' + item.section.questions.question.id + '">' + item.section.questions.question.title + ' <button class="btn" data-response="a">A</button><button class="btn" data-response="b">B</button></li>');
}
}
});
}
function addResponse( $id, $title, $response ) {
$('#responses').append('<li id="'+$id+'">'+$title+' <span>'+$response+'</span></li>');
}
$(document).ready(function() {
// should load the first question from the passed section
loadQuestion( $('.section').data('section') );
// add the response to the list and then load in the next question
$('button.btn').live('click', function() {
$id = $(this).parents('li').attr('id');
$title = $(this).parents('li').html();
$response = $(this).data('response');
addResponse( $id, $title, $response );
loadQuestion ( $('.section').data('section') );
});
});
和页面的HTML（每个页面都是单独的HTML页面）：
<div class="section" data-section="1">
<ul id="questions"></ul>
<ul id="responses"></ul>
</div>
我对如何从一个部分只获得第一个问题然后连续加载该部分的每个问题直到所有部分都被调用然后进行回调以显示该部分已经完成而感到困惑和困惑。 / p>
由于
答案 0 :(得分：2)
一个解决方案可以是section1，section2等，而不仅仅是section。不要依赖HTML中的data-section属性 - 如果你有“section”作为重复的html id和重复的JSON密钥，那么它仍然不好。
如果HTML DOM中只有一个section id，那么在你的JSON中你还必须只有一个名为“section”的东西，例如：
var whatever = {
"section" : {
"1": {
"question" : {
"1" : {
"id" : "1a",
"title" : "question1a"
},
"2" : {
"id" : "2a",
"title" : "question2a"
}
}
},
"2": {
"question" : {
"1" : {
"id" : "1a",
"title" : "aquestion1a"
},
"2" : {
"id" : "2a",
"title" : "aquestion2a"
}
}
}
}
}
console.log(whatever.section[1].question[1].title); //"question1a"
要提出问题，请执行以下操作：
function loadQuestions(mySectionNum) {
$.getJSON('whatever.json', function(data){
var layeriwant = data.section[mySectionNum].question;
$.each(layeriwant, function(question, qMeta) {
var desired = '<div id="question-' +
qMeta.id +
'"' +
'>' +
'</div>';
$("#section").append(desired);
var quest = $("#question-" + qMeta.id);
quest.append('<div class="title">' + qMeta.title + '</div>');
//and so on for question content, answer choices, etc.
});
});
}
然后这样的事实上得到了问题：
function newQuestion(){
var myHTMLSecNum = $("#section").attr('data-section');
loadQuestions(myHTMLSecNum);
}
newQuestion();
//below is an example, to remove and then append new question:
$('#whatevernextbutton').on('click',function(){
var tmp = parseInt($("#section").attr('data-section'));
tmp++;
$("#section").attr('data-section', tmp);
$("#section").find('*').remove();
newQuestion();
});
答案 1 :(得分：1)
从技术上讲，您的getJSON函数始终会检索相同的数据。您的代码永远不会比较您提取的ID的ID。
你的getJSON应该类似于：
function loadQuestion( $section ) {
for (var i = 0; i < questions.section.length; i++) {
var item = questions.section[i];
if (item.id === $section) {
for (var j = 0; j < item.questions.length; j++) {
$('#questions').append('<li id="' +
item.questions[i].id + '">' +
item.questions[i].title +
' <button class="btn" data-response="a">A</button><button class="btn" data-response="b">B</button></li>'
);
}
}
}
}
将您的JSON修改为：
var questions = {
section: [{
id: 1,
questions: [{
id: "1a",
title: "This is question1a"
},{
id: "2a",
title: "This is question2a"
}]},{
id: 2,
questions: [{
id: "1a",
title: "This is question1a"
},{
id: "2a"
title: "This is question2a"
}]
}]
};
编辑：getJSON的第一个参数是JSON返回服务的URL。
如果您的JSON已在客户端上定义，则根本不需要getJSON。我修改了上面的代码。