我可以使用 JS 从 JSON 数组中一次使用一个字符串吗？答案

【问题标题】：Can I use JS to use one string at a time from JSON array?我可以使用 JS 从 JSON 数组中一次使用一个字符串吗？
【发布时间】：2015-06-02 13:42:18
【问题描述】：

我正在制作一个琐事游戏，以更好地了解如何使用 JSON 文件。目前，我正在使用 JS 和 jQuery 来提取构成琐事游戏的问题和答案字符串，如下所示：

$.getJSON('/trivia.json', function(data) {
var items = [] 
$.each(data, function (item, i) {
items.push('<p style="font-weight: bold" id="">' + ' Question ' + i.order + '    - ' + i.question + '</p>');
items.push('<input type="checkbox" id="">' + ' A1: ' + i.answer1 + '</p>');
items.push('<input type="checkbox" id="">' + ' A2: ' + i.answer2 + '</p>');
items.push('<input type="checkbox" id="">' + ' A3: ' + i.answer3 + '</p>');
items.push('<input type="checkbox" id="">' + ' A4: ' + i.answer4 + '</p>');
items.push('<input type="checkbox" id="">' + ' Correct Answer: ' + ' - ' +   i.correcta + '</p>');});

然后它将这个测验的问题/答案选项附加到一个 div：

$('<p/>', {
'class': 'my-new-list2',
html: items.join('')
}).appendTo('#example2');});

好消息是数组正在通过；但是，它同时显示了整个问题和答案列表（因此用户现在可以看到七组问题/答案）。

我希望用户在提交答案之前最终只看到一个问题，然后让测验循环到下一个问题。

因此，我想知道：

更简单地说，我可以使用 items.push 仅调用数组中的第一个字符串，因此它仅加载数组中的第一个问题/答案组合，这将解决一些问题，并且；
如果是这样，我可以使用提交按钮来加载第二个问题/答案字符串并让用户完成问题吗？

【问题讨论】：

为什么不为问题和答案制作一个单独的数组？
我可能错过了这一点，但即使它们与现在在同一个数组中，items.push 行也会单独调用带有 Question 标签的项目，然后是标有 Answer1、Answer 的 Answers 2，以此类推。如果我为问题和答案生成了两个单独的数组，然后运行了一个类似的函数，它是否仍会显示整个问题数组和整个答案数组？我担心的是，如果有意义的话，我一次只想显示一个问题 + 4 个答案。
好的，我明白你的意思了。您可以使用 css 隐藏答案，当用户点击提交或显示答案时，您可以使用简单的 jquery 向用户显示答案。对于您的其他问题，您可以展示第一个问题，类似于 items[0]。下一个问题 -> 进行 ajax 调用并进行 items[1]
data 返回了多少个questions？试过“2.如果是这样，我可以使用提交按钮来加载第二个问题/答案字符串并让用户完成问题吗？”？
@Mikey - 这对我来说很有意义。调用数组中的第一项，然后循环遍历它们。我通过将 var items = [] 更改为 var items = [0] 进行了尝试，但它无法加载数据。你能澄清我应该在哪里指定那个项目吗？此外，由于这看起来是理想的方法，如果您想作为答案回复以便我可以接受，那就太好了（以防万一有人在路上遇到类似的问题）。谢谢！

标签： javascript jquery arrays json

【解决方案1】：

这是对您的问题的简化，而不是服务器端，但这基本上是您可以尝试的：http://jsfiddle.net/p8ed51eo/1/

var number= 0;

(function () {
    var q = ["1", "2", "3", "4", "5"];
    var display = q[number];
    document.getElementById('test').innerHTML = display;
    number++;
})()//self invoking function for first run of script

document.getElementById('next').onclick=function () {
    var q = ["1", "2", "3", "4", "5"];
    var display = q[number];
    document.getElementById('test').innerHTML = display;
    number++;
}//function to jump to next item in array

【讨论】：