Question

我将尝试最好地描述这一点，因为我可以做出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?",
		          "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>

Answer 1

很少有地方出错。首先，有一个额外的循环，没有理由在那里。

$.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树

我正在使用Jquery / Ajax进行琐事游戏，但答案出现在错误的位置

1 个答案: