使用JSON数据插入div以填充html中的另一个div

时间：2016-10-17 23:18:12

标签： javascript jquery html json

这是一个测验，我试图用JSON文件中的单词填充每个问题。

Here is the JSFiddle

activity.json是问题 words.json是单词

有人能帮助我吗？它带来了未定义的。

我想填充这个词的div的ID是#words

我迷路了，无法找到展示它们的方法。

$(document).ready(function() {
      var questionNumber = 0;
      var wordNumber = 0;
      var questionBank = new Array();
      var wordsBank = new Array();
      var stage = "#game1";
      var stage2 = new Object;
      var questionLock = false;
      var numberOfQuestions;
      var score = 0;

      $.getJSON('activity.json', function(data) {
          for (i = 0; i < data.quizlist.length; i++) {
            questionBank[i] = new Array;
            questionBank[i][0] = data.quizlist[i].question;
            questionBank[i][1] = data.quizlist[i].option1;
            questionBank[i][2] = data.quizlist[i].option2;
            questionBank[i][3] = data.quizlist[i].option3;
          }

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

            for (i = 0; i < data.quizlist.length; i++) {
              wordsBank[i] = new Array;
              wordsBank[i] = data.quizlist[0].words1;
              wordsBank[i] = data.quizlist[1].words2;
            }
            numberOfWords = wordsBank.length;
          })
          numberOfQuestions = questionBank.length;

          displayQuestion();
        }) //gtjson

      function displayQuestion() {
          var q1;
          var q2;
          var q3;
          var q4;
          var q5;
          var rnd = Math.random() * 3;
          rnd = Math.ceil(rnd);

          if (rnd == 1) {
            q1 = questionBank[questionNumber][1];
            q2 = questionBank[questionNumber][2];
            q3 = questionBank[questionNumber][3];
          }
          if (rnd == 2) {
            q2 = questionBank[questionNumber][1];
            q3 = questionBank[questionNumber][2];
            q1 = questionBank[questionNumber][3];
          }
          if (rnd == 3) {
            q3 = questionBank[questionNumber][1];
            q1 = questionBank[questionNumber][2];
            q2 = questionBank[questionNumber][3];
          }

          $(stage).append('<div class="questionText">' + questionBank[questionNumber][0] + '</div><div id="1" class="option">' + q1 + '</div><div id="2" class="option">' + q2 + '</div><div id="3" class="option">' + q3 + '</div>');

          $('.option').click(function() {
            if (questionLock == false) {
              questionLock = true;
              $('#words').append('<div class="word-pt bluedark_txt">' + q5 + '</div><div id="1" class="words word-en bluish_txt">' + q4 + '</div>');

              //correct answer
              if (this.id == rnd) {
                $(stage).append('<div class="feedback1">CORRECT</div>');
                score++;
              }
              //wrong answer    
              if (this.id != rnd) {
                $(stage).append('<div class="feedback2">WRONG</div>');
              }

              setTimeout(function() {
                changeQuestion()
              }, 1000);
            }
          })
        } //display question

      function changeQuestion() {
          questionNumber++;

          if (stage == "#game1") {
            stage2 = "#game1";
            stage = "#game2";
          } else {
            stage2 = "#game2";
            stage = "#game1";
          }

          if (questionNumber < numberOfQuestions) {
            displayQuestion();
          } else {
            displayFinalSlide();
          }

          $(stage2).animate({
            "right": "+=800px"
          }, "slow", function() {
            $(stage2).css('right', '-800px');
            $(stage2).empty();
          });
          $(stage).animate({
            "right": "+=800px"
          }, "slow", function() {
            questionLock = false;
          });
        } //change question

2 个答案:

答案 0 :(得分：-1)

试试这个;）

尝试使用getjson;

的代码 
$.getJSON('activity.json', function(data){
  numberOfQuestions = data.quizlist.length;
  for(i = 0; i < numberOfQuestions; i++){
    questionBank[i] = [];
    questionBank[i].push(data.quizlist[i].question);
    questionBank[i].push(data.quizlist[i].option1);
    questionBank[i].push(data.quizlist[i].option2);
    questionBank[i].push(data.quizlist[i].option3);
  }      

  $.getJSON('words.json', function(data){
    numberOfWords = data.quizlist.length;
    for(i = 0; i < numberOfWords; i++){
      wordsBank[i] = [];
      wordsBank[i].push(data.quizlist[0].words1);
      wordsBank[i].push(data.quizlist[1].words2);
    }        
    displayQuestion();
  });
}) //gtjson

答案 1 :(得分：-1)

首先要做的事情。如果您在任何现代浏览器中按F12，它将调出开发人员工具，它们对于调试错误非常有用。不知道你是否意识到这一点，只是想我告诉你。

  1. 我遇到了如何设置小提琴以访问json的问题，jsfiddle阻止了请求，所以我只是让你的json成为局部变量。 （这就是为什么你不能从jsFiddle向你的json提出请求的原因。 jQuery xml error ' No 'Access-Control-Allow-Origin' header is present on the requested resource.'）

  2. 关闭括号也存在一些问题。

  3. 还有两个变量，q4和q5，您使用但从未定义。我只是给了他们一个价值，虽然我不确定你的意图是什么。

    4. 这是一个新的jsFiddle。 https://jsfiddle.net/AlmondSeason/xd71kwyg/

    我会为StackOverflow发布javascript。

    $(document).ready(function() {

  var questionNumber = 0;
  var wordNumber = 0;
  var questionBank = new Array();
  var wordsBank = new Array();
  var stage = "#game1";
  var stage2 = new Object;
  var questionLock = false;
  var numberOfQuestions;
  var score = 0;

  var data = {
    "quizlist": [

      {
        "question": "How much is two plus two?",
        "option1": "Four",
        "option2": "Five",
        "option3": "Two",
        "wordsEN": "two",
        "wordsPT": "dois"
      }, {
        "question": "Selecione a sentença correta",
        "option1": "I am a person",
        "option2": "I is a person",
        "option3": "I are a person",
        "wordsEN": "people",
        "wordsPT": "pessoas"
      }, {
        "question": "Select the correct form in the interrogative",
        "option1": "Are you a student?",
        "option2": "Is you a student?",
        "option3": "You are a student?",
        "wordsEN": "teacher",
        "wordsPT": "professor(a)"
      }, {
        "question": "How much is one minus one?",
        "option1": "Zero",
        "option2": "Two",
        "option3": "Four",
        "wordsEN": "ten",
        "wordsPT": "dez"
      }, {
        "question": "He / She / It usam o verbo To Be ...",
        "option1": "is",
        "option2": "are",
        "option3": "am",
        "wordsEN": "Two",
        "wordsPT": "Dois"
      }, {
        "question": "Selecione a frase correta na afirmativa",
        "option1": "We are here.",
        "option2": "Are we here.",
        "option3": "We are not here.",
        "wordsEN": "Two",
        "wordsPT": "Dois"
      }, {
        "question": "Selecione a forma correta na negativa",
        "option1": "He is not here.",
        "option2": "He is not here?",
        "option3": "He are not here.",
        "wordsEN": "Two",
        "wordsPT": "Dois"
      }, {
        "question": "You / We / They usam o Verbo To Be ...",
        "option1": "are",
        "option2": "am",
        "option3": "is",
        "wordsEN": "Two",
        "wordsPT": "Dois"
      }

    ]
  };
  numberOfQuestions = data.quizlist.length;
  for (i = 0; i < numberOfQuestions; i++) {
    questionBank[i] = [];
    questionBank[i].push(data.quizlist[i].question);
    questionBank[i].push(data.quizlist[i].option1);
    questionBank[i].push(data.quizlist[i].option2);
    questionBank[i].push(data.quizlist[i].option3);
  }



  data = {
    "quizlist": [

      {
        "wordsEN": "two",
        "wordsPT": "three"
      }, {
        "wordsEN": "people",
        "wordsPT": "person"
      }, {
        "wordsEN": "teacher",
        "wordsPT": "teachers"
      }, {

        "wordsEN": "ten",
        "wordsPT": "eleven"
      }, {

        "wordsEN": "Five",
        "wordsPT": "Two"
      }, {

        "wordsEN": "Seven",
        "wordsPT": "One"
      }, {

        "wordsEN": "Five",
        "wordsPT": "Three"
      }, {

        "wordsEN": "house",
        "wordsPT": "bathroom"
      }

    ]
  };
  numberOfWords = data.quizlist.length;
  for (i = 0; i < numberOfWords; i++) {
    wordsBank[i] = [];
    wordsBank[i].push(data.quizlist[0].words1);
    wordsBank[i].push(data.quizlist[1].words2);
  }
  displayQuestion();
  //gtjson



  //Display question and word, if correct
  function displayQuestion() {
    var q5 = "What is q5 supposed to be";
    var q4 = "What is q4 supposed to be";
    //separate div that is the container of words.json
    var wordsShow = $('<div class= "center_txt"><div id="1">' + q5 + '</div><div id="2">' + q4 + '</div></div>')

    var rnd = Math.random() * 3;
    rnd = Math.ceil(rnd);
    var q1;
    var q2;
    var q3;

    if (rnd == 1) {
      q1 = questionBank[questionNumber][1];
      q2 = questionBank[questionNumber][2];
      q3 = questionBank[questionNumber][3];
    }
    if (rnd == 2) {
      q2 = questionBank[questionNumber][1];
      q3 = questionBank[questionNumber][2];
      q1 = questionBank[questionNumber][3];
    }
    if (rnd == 3) {
      q3 = questionBank[questionNumber][1];
      q1 = questionBank[questionNumber][2];
      q2 = questionBank[questionNumber][3];
    }

    //show the options
    $(stage).append('<div class="questionText">' + questionBank[questionNumber][0] + '</div><div id="1" class="option">' + q1 + '</div><div id="2" class="option">' + q2 + '</div><div id="3" class="option">' + q3 + '</div>');

    $('.option').click(function() {
      if (questionLock == false) {
        questionLock = true;
        //correct answer

        //show the word from words.json
        $("#words").append(wordsShow);

        if (this.id == rnd) {
          $(stage).append('<div class="feedback1">CORRECT</div>');
          score++;
        }
        //wrong answer  
        if (this.id != rnd) {
          $(stage).append('<div class="feedback2">WRONG</div>');
        }
        setTimeout(function() {
          changeQuestion()
        }, 1000);
      }
    })
  } //display question






  function changeQuestion() {

    questionNumber++;

    if (stage == "#game1") {
      stage2 = "#game1";
      stage = "#game2";
    } else {
      stage2 = "#game2";
      stage = "#game1";
    }

    if (questionNumber < numberOfQuestions) {
      displayQuestion();
    } else {
      displayFinalSlide();
    }

    $(stage2).animate({
      "right": "+=800px"
    }, "slow", function() {
      $(stage2).css('right', '-800px');
      $(stage2).empty();
    });
    $(stage).animate({
      "right": "+=800px"
    }, "slow", function() {
      questionLock = false;
    });
  } //change question
});



//doc ready

    修改

    更改你的DOM所以单词div不是游戏div的孩子。当你附加到游戏div时，你会摧毁那个div的所有孩子，包括单词div。

    改变这个：

    <div id="game1">
 <div id="words1"></div>
</div>
<div id="game2">
 <div id="words2"></div>
</div>

    对此：

    <div id="game1"></div>
<div id="words"></div>

<div id="game2"></div>
<div id="words2"></div>

    这是另一个要检查的小提琴。 https://jsfiddle.net/xd71kwyg/2/ 我会告诉你什么时候想要摧毁其他div或者你想怎么做。

相关问题
最新问题