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

首先是第一件事。如果您在任何现代浏览器中按F12键，它将打开开发人员工具，它们对于调试错误非常有用。不知道您是否知道这一点，只是以为我会告诉您。

1. 我在如何设置小提琴访问json时遇到问题，jsfiddle阻止了请求，因此我只是将json设置为局部变量。（这就是为什么您不能从jsFiddle向json发出请求的原因。jQueryxml错误'请求的资源上没有'Access-Control-Allow-Origin'标头。'）

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

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

这是一个新的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或如何进行处理。