0

我有以下 JSON：

var questions = {
    section: {
        "1": question: {
            "1": {
                "id" : "1a",
                "title": "This is question1a"
            },
            "2": {
                "id" : "1b",
                "title": "This is question2a"
            }
        },
        "2": question: {
            "1": {
                "id" : "2a",
                "title": "This is question1a"
            },
            "2": {
                "id" : "2b",
                "title": "This is question2a"
            }
        }
    }
};

注意：JSON 根据以下答案进行了更改，以更好地支持该问题，因为原始 JSON 格式错误以及它如何与下面的 for 循环一起使用。

完整的 JSON 将有 8 个部分，每个部分将包含 15 个问题。

这个想法是 JS 代码将读取要拉出的部分，然后从列表中一一拉出问题。在第一次加载时，它将拉出第一个问题，然后当用户单击选项 A 或 B 的按钮时，它将加载下一个问题，直到所有问题都被拉出，然后进行回调。

当单击附加列表项中的按钮时，它会将其添加到下面称为响应的列表中，其中用户给出的答案作为跨度标记。

这是我到目前为止所拥有的：

    function loadQuestion( $section ) {

    $.getJSON('questions.json', function (data) {

    for (var i = 0; i < data.length; i++) {

        var item = data[i];

        if (item === $section) {
            $('#questions').append('<li id="' + item.section.questions.question.id + '">' + item.section.questions.question.title + ' <button class="btn" data-response="a">A</button><button class="btn" data-response="b">B</button></li>');
        }
    }
});

}

    function addResponse( $id, $title, $response ) {

        $('#responses').append('<li id="'+$id+'">'+$title+' <span>'+$response+'</span></li>');

    }

    $(document).ready(function() {

        // should load the first question from the passed section
        loadQuestion( $('.section').data('section') );

        // add the response to the list and then load in the next question
        $('button.btn').live('click', function() {

            $id = $(this).parents('li').attr('id');
            $title = $(this).parents('li').html();
            $response = $(this).data('response');

            addResponse( $id, $title, $response );

            loadQuestion ( $('.section').data('section') );

        });

    });

以及页面的 HTML（每个页面都是单独的 HTML 页面）：

<div class="section" data-section="1">

            <ul id="questions"></ul>

            <ul id="responses"></ul>

        </div>

我已经被如何只从一个部分中获取第一个问题然后连续加载该部分的每个问题直到所有问题都被调用然后进行回调以显示该部分已完成而感到困惑和困惑。

谢谢

4

2 回答 2

2
  1. html 中没有多个 id，称为“section”。
  2. 在您的 JSON 中不要在称为“部分”的同一级别上有多个键。同一级别的 JSON 中的键应该是唯一的，就像您正在考虑键值哈希系统一样。然后你就可以真正找到钥匙了。同一级别的重复 JSON 密钥无效。

一种解决方案可以是 section1、section2 等，而不仅仅是 section。不要依赖 HTML 中的 data-section 属性 - 如果将“section”作为重复的 html id 和重复的 JSON 键，仍然不好。

如果您在 HTML DOM 中只有一个 section id，那么在您的 JSON 中您还必须只有一个名为“section”的东西，例如：

var whatever = {
                    "section" : { 
                               "1":  {
                                        "question" : {
                                                       "1" : {
                                                          "id" : "1a",
                                                          "title" : "question1a"
                                                              },
                                                       "2" : {
                                                          "id" : "2a",
                                                          "title"  : "question2a"
                                                              }
                                                     }
                                      },                                 
                                "2":  {
                                        "question" : {
                                                       "1" : {
                                                          "id" : "1a",
                                                          "title" : "aquestion1a"
                                                              },
                                                       "2" : {
                                                          "id" : "2a",
                                                          "title"  : "aquestion2a"
                                                              }
                                                     }
                                      }
                                 }
               }
console.log(whatever.section[1].question[1].title); //"question1a"

要获得问题，请执行以下操作：

   function loadQuestions(mySectionNum) {

       $.getJSON('whatever.json', function(data){

        var layeriwant = data.section[mySectionNum].question;

           $.each(layeriwant, function(question, qMeta) {
               var desired = '<div id="question-' + 
                              qMeta.id +
                              '"' + 
                              '>' + 
                              '</div>';
               $("#section").append(desired);
               var quest = $("#question-" + qMeta.id);
               quest.append('<div class="title">' + qMeta.title + '</div>');
               //and so on for question content, answer choices, etc.
           });



       });
   }

然后像这样实际得到问题：

    function newQuestion(){
       var myHTMLSecNum = $("#section").attr('data-section');
       loadQuestions(myHTMLSecNum);
    }

    newQuestion();

  //below is an example, to remove and then append new question:

    $('#whatevernextbutton').on('click',function(){
       var tmp = parseInt($("#section").attr('data-section'));
       tmp++;
       $("#section").attr('data-section', tmp);
       $("#section").find('*').remove();
       newQuestion();
    });
于 2012-09-12T10:03:16.377 回答
1

从技术上讲，您的getJSON函数始终检索相同的数据。您的代码永远不会将给定的 id 与您正在提取的 id 进行比较。

您的 getJSON 应该类似于：

function loadQuestion( $section ) {
        for (var i = 0; i < questions.section.length; i++) {

            var item = questions.section[i];
            if (item.id === $section) {
                for (var j = 0; j < item.questions.length; j++) {
                    $('#questions').append('<li id="' + 
                        item.questions[i].id + '">' + 
                        item.questions[i].title + 
                        ' <button class="btn" data-response="a">A</button><button class="btn" data-response="b">B</button></li>'
                    );
                }
           }
        }
}

将您的 JSON 修改为：

var questions = {
    section: [{
        id: 1,
        questions: [{
            id: "1a",
            title: "This is question1a"
            },{
            id: "2a",
            title: "This is question2a"
        }]},{
        id: 2,
        questions: [{
            id: "1a",
            title: "This is question1a"
            },{
            id: "2a"
            title: "This is question2a"
        }]
    }]
};

编辑：getJSON的第一个参数是 JSON 返回服务的 URL。

如果您的 JSON 已在客户端上定义，则您根本不需要 getJSON。我已经修改了上面的代码。

于 2012-09-12T10:08:15.077 回答