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

  • Z时代
  • 2024-01-10
  • 分类：问答

我将尽力描述这一点，因为我可以做出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>

回答：

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

$.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，但答案出现在错误的位置 的全部内容， 来源链接： utcz.com/qa/259603.html

回到顶部