Question

我有一个Json，带有指向图片的网址和相应的编号。我正在通过两个for循环来运行它，在第一个循环中工作正常，但在第二个中则无法。你能告诉我为什么在第二个页面中显示为“未定义”吗？

   {
    "sources": [
        {"pic": "../img/Bild1.png", "number": "1"},
        {"pic": "../img/Bild2.png", "number": "2"},

        {"pic": "../img/Bild9.png", "number": "9"},
        {"pic": "../img/Bild10.png","number": "10"}
]
}

var url = "../js/Bildquelle.json";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (xhttp.readyState === 4 && xhttp.status === 200) {
    var json = JSON.parse(xhttp.responseText);
    gameStart(json.sources);

  }
};
xhttp.open("GET", url, true); //Resource beziehen, true= synchron
xhttp.send(); //Anfrage abschicken


function gameStart(Bildquelle) {


  // Create the pile of shuffled cards in random order
  Bildquelle.sort(function() {
    return Math.random() - .5
  });


  for (var i = 0; i < 10; i++) {
    var Karte = $('<img src=' + Bildquelle[i].pic + ' alt="Bild">').data('number', Bildquelle[i].number).attr('id', 'card' + Bildquelle[i].number).appendTo('#cardPile').draggable({
      containment: '#content',
      stack: '#cardPile img',
      cursor: 'move',
      revert: true
    })
  };


  // Create the card slots
  var number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  for (var j = 1; j <= 10; j++) {
    var Kartenslot = $('<div></div>').data('number', j).appendTo('#cardSlots').css('background-image', 'url(' + Bildquelle[j].pic + ')').attr('id', 'slot' + number[j - 1]).droppable({
      accept: '#cardPile img',
      hoverClass: 'hovered',
      drop: handleCardDrop
    });
  }

};

Answer 1

如果es6支持可用，请使用let i代替var i或更改var name in second for。

var创建scope到功能级别。

Answer 2

您正在两个循环中定义变量i。尝试将第二个循环的变量更改为另一个循环，或尝试使用block scoping

    for (let i = 0; i < 10; i++) {
        /* i is defined here */ 
    }
    /* i is not defined here * /

这将使您可以选择在两个循环中声明变量i，而不会出错。

Json Array在第二个for循环中未定义

2 个答案: