我正在做一个琐事游戏使用jquery/Ajax，但答案出现在错误的位置

我将尽力描述这一点，因为我可以做出Ajax响应，它加载正常，但问题是所有每个问题的答案/选择出现在错误的问题上。我正在做一个琐事游戏使用jquery/Ajax，但答案出现在错误的位置

确实有道理吗？我会提供代码我应该在ajax请求中定位答案还是使另一个函数匹配正确的问题和答案？

'use strict'; 
 

 
$(document).ready(function() { 
 

 
    $.getJSON("json_data.json", function(obj) { 
 
    $.each(obj, function(key, value) { 
 
     $("div").append("<li>" + value.title + "</li><br/>"); 
 
     $.each(obj, function(key, value) { 
 
     $("div").append("<ul>" + value.choices + "</ul><br/>"); 
 

 

 
     }); 
 
    }); 
 
    }); 
 
});

{ 
 
    "q1": { 
 
      "title": "Superman is known as the world's greatest superhero. His alter-ego, Clark Kent, is a mild-mannered reporter for which newspaper?", 
 
\t \t   "choices": ["The Daily Bugle" , "The Gotham Gazette","The Daily Planet","The Central City Citizen"], 
 
       "correctAnswer": 2 
 
     }, 
 

 
     "q2": { 
 
       "title": "John Constantine is a magician, demon-fighter, and all around do-gooder, but he's got one pretty serious vice. What is it?", 
 
       "choices": ["Gambling", "Overeating","Shoplifting","Cigarettes"], 
 
        "correctAnswer": 3 
 
       }, 
 

 
       "q3": { 
 
       "title": "She may be green, but she's got no reason to be jealous of anyone. In what universe is Guardian Gamora? ", 
 
       "choices": ["Marvel", 
 
       "Image", 
 
       "Vertigo", 
 
       "Top Shelf"], 
 
       "correctAnswer": 0 
 
      }, 
 
      "q4": { 
 
    "title": "Who paralyzed Barbara Gordon?", 
 
    "choices": ["Two-Face","ScareCrow","The Joker (My husband to be)","Solomon Grundy "], 
 
      "correctAnswer":2 
 
}, 
 
"q5": { 
 
"title": "What is Batman Incorporated?", 
 
"choices": ["Army of Bat-Bot's","Global crime-fighting organization"], 
 
      "correctAnswer":1 
 
},"q6": { 
 
"title": "Who is X-23?", 
 
    "choices":["New advanced Sentinel","Wolverine's mutant clone"], 
 
      "correctAnswer":1 
 
},"q7": { 
 
"title": "Which book does Hermione steal from Dumbledore's office?", 
 
      "choices":[ 
 
       "Magick Moste Evile", 
 
       "The Tales of Beedle the Bard", 
 
       "History of Magic", 
 
       "Nature's Nobility: a Wizarding Genealogy" 
 
      ], 
 
      "correctAnswer":0 
 
},"q8": { 
 
"title": "Who disguised himself as Mad Eye Moody in the TheGoblet of Fire?", 
 
      "choices":[ 
 
       "Barty Crouch Jr.", 
 
       "Ernie McMillian", 
 
       "Severus Snape", 
 
       "Vincent Crabbe" 
 
      ], 
 
      "correctAnswer":0 
 
},"q9": { 
 
"title": "Han Solo's trusty blaster is a:?", 
 
      "choices":[ 
 
       "C-3PO", 
 
       "D4-66", 
 
       "BB-88", 
 
       "DL-44" 
 
      ], 
 
      "correctAnswer":3 
 
},"q10": { 
 
"title": "Vader cuts off Luke's _____ hand?", 
 
      "choices":[ 
 
       "right", 
 
       "left", 
 
       "both" 
 
      ], 
 
      "correctAnswer":0 
 
} 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <script src="jquery-3.2.1.min.js" type="text/javascript"></script> 
 
    <title>JSON jQuery AJAX</title> 
 
</head> 
 

 
<body> 
 
    <h1>COOl</h1> 
 

 
    <div></div> 
 

 
    <button id="submit" class="button">Submit Quiz</button> 
 

 

 
    <script src="my_script.js" type="text/javascript"></script> 
 
</body> 
 

 
</html>

来源

2017-12-03 J.keve

当然，内部循环应该遍历与标题相关的“选择”。 'obj'的嵌套迭代是无稽之谈。 –

可能会使您的片段首先工作 –

有这何处去错了几个地方。首先，有一个额外的循环，没有理由在那里。

$.getJSON("json_data.json", function(obj) { 
    $.each(obj, function(key, value) { 
     $("div").append("<li>" + value.title + "</li><br/>"); 
     $("div").append("<ul>" + value.choices + "</ul><br/>"); 
    }); 
    });

其次，用你的代码。 jquery将标题和选择添加到页面上的所有div，这是我们不想要的。相反，创建一个id一个div让jQuery将只追加到特定的div

$.getJSON("json_data.json", function(obj) { 
    $.each(obj, function(key, value) { 
     $("#specificDiv").append("<li>" + value.title + "</li><br/>"); 
     $("#specificDiv").append("<ul>" + value.choices + "</ul><br/>"); 
    }); 
    });

第三，从不附加元素到DOM中循环。这是一个非常糟糕的做法，因为DOM的操作很慢且性能密集。相反，将所有你想要的html保存在一个变量中，并在最后追加一次。

var html = ''; 
$.getJSON("json_data.json", function(obj) { 
    $.each(obj, function(key, value) { 
     html += "<li>" + value.title + "</li><br/>"; 
     html += "<ul>" + value.choices + "</ul><br/>"; 
    }); 
    $("#specificDiv").append(html); 
});

最后，为不同的元素使用正确的标签。你已经使用li标签作为标题，并使用li而不包含ul或ol。而是使用跨度。使用正确的标签有助于浏览器更快地构建DOM树

来源

2017-12-03 06:20:33 cdoshi

我正在做一个琐事游戏使用jquery/Ajax，但答案出现在错误的位置

回答

相关问题