Question

我必须建立JS多选问卷。

为了阅读json的详细信息，我使用以下代码：

$(document).ready(function(){
    $.getJSON("data.json", function(json) {
        var anserFor1st = json.questions[0].answers;
        var anserFor2nd = json.questions[1].answers;//If it's more than two use a loop
        document.getElementById("content").innerHTML =  JSON.stringify(anserFor1st) + "<br/>" + JSON.stringify(anserFor2nd);
        var aString = "";
        Object.keys(anserFor1st).forEach(function (k) {aString += anserFor1st[k] + "<br/>";});
        Object.keys(anserFor2nd).forEach(function (k) {aString += anserFor2nd[k] + "<br/>";});
        document.getElementById("content").innerHTML = aString;
    });
});

我必须在同一页面中提出所有问题和答案，但每次都有不同的内容（也就是问题和答案）。我必须通过后退和前进按钮在问题之间移动。如何在html中动态显示不同问题的值？

Answer 1

如果您在列表中有所有问题，就像您看到的那样，动态更改问题内容的jQuery非常简单。我们可以创建一个函数，并将参数传递给函数，告诉它在问题数组中向前或向后移动，只要它不会扩展到数组之外。一个例子是here。

var testArray = ["first q", "second q", "third q", "fourth q"];
var questionIndex = 0;

function updateQuestion(direction) {
    questionIndex += direction;
    if (questionIndex < testArray.length && questionIndex >= 0) {
        $(".question").html(testArray[questionIndex]);
    } else {
        questionIndex -= direction;
    }
}

$(document).ready(function () {
    updateQuestion(0);
});

您应该能够遍历您的问题，并将JSON数据附加到空白数组中，而不是testArray。

如何动态地将JavaScript文件中的数据附加到html文件中

1 个答案: