javascript - 无法第二次读取未定义的属性

Question

我在创建单人纸牌游戏时遇到了一些问题。

我正在处理剩余的牌组，单击该牌组时将显示剩余的牌，因此玩家可以在单击牌组的同时循环浏览它们。

问题本身:当您单击牌组时，代码会生成一个图片文件名，该文件名采用来自 2 个不同数组的参数。

点击卡片后第一次出现没有任何错误，但当第二次尝试点击时出现错误:“无法读取未定义的属性‘Taskai’”。

代码:

$.widget("Game.RemainingDeck", {
  options: {
    remainingDeck: []
  },

  _create: function() {
    var game = this;
    game.flipACard();

  },
  flipACard: function() {
    var i = 0;
    var game = this;

    $("#remDeck").click(function() {

      var remainDeck = game.options.remainingDeck;


      var remDeck = $('#remDeck');
      var oppenedCard = $('#openCard');
      var card = $('<div class=" card"></div> ');

      var imageName = remainDeck[i].Taskai + '_of_' + remainDeck[i].Simbolis + '.png';
      var imagePath = 'texture/' + imageName;

      card.css('background-image', 'url("' + imagePath + '")');

      if (i = game.options.remainingDeck.lenght) {
        aler("kaladë prasideda ið naujo");
      }

      i++;
      oppenedCard.append(card);

    });
  }
})

Answer 1

i 需要是一个外部变量，否则每次点击处理程序运行时它都是 0。

此外，我认为点击处理程序不应附加到 .flipcard() 中，否则每次 flipCard() 都会一遍又一遍地附加运行。尝试在 .create_() 中附加点击处理程序。

$.widget("Game.RemainingDeck", {
    options: {
        remainingDeck: []
    },
    _create: function() {
        var game = this;
        var i = 0;
        $("#remDeck").on('click', function() {
            $('#openCard').append($('<div class=" card"></div>').css('background-image', 'url("texture/' + game.options.remainingDeck[i].Taskai + '_of_' + game.options.remainingDeck[i].Simbolis + '.png")'));
            if(i === game.options.remainingDeck.length) {
                alert("kaladë prasideda ið naujo");
            }
            i++;
        });
        this.flipACard();
    },
    flipACard: function() {
        $("#remDeck").click();
    }
})

大概你 .pop()(或 .shift())在某个时候从 remainingDeck 上打牌？您可以在翻转时这样做，在这种情况下，i 计数器是不必要的。