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

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

我正在其余卡座上工作，单击该卡座时将显示剩余卡，因此玩家可以在卡座上单击时循环浏览它们。

问题本身：当您单击甲板代码时，将生成一个图片文件名，该文件名取自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);

    });
  }
})

最佳答案

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计数器。