Question

这个片段来自一个二十一点游戏，我希望每次点击一个点击按钮时在DOM上显示新的卡片图像。

// ***************************************** //
function DeckObject() {

    this.cardArray = []
      // ***************************************** //
    this.displayCards = function(cardPair) {
        var fragment = document.createDocumentFragment();
        for (var i = 0; i < cards.length; i++) {
          var imgElement = document.createElement("img");
          imgElement.src = "Images/" + cardPair[i].cardNum + "_of_" + cards[i].cardSuit + ".png";
          fragment.appendChild(imgElement);
        }
        if (this === User) {
          showUserCards.appendChild(fragment); //showUserCards is a var with div element
        } else {
          showDealerCards.appendChild(fragment);
        }
      }
      // ***************************************** //
    this.hitCard = function(cardPair) {
      var extraCard = cardPair.push(MainDeck.cardArray.pop());
      this.displayCards(cardPair[extraCard - 1]); //display only the new added card
    }
  }
  // **************************************** //

所以我基本上做的是：在每次'hitButton'点击时，我执行hitCard（）函数，我将一张新卡推送到最初通过cardArray。
然后我只将新添加的卡传递给displayCards（）函数，以便在DOM中显示它。

注意： displayCards（）最初编码为'n-size'数组，除非我通过hitCard（）函数将单卡对象传递给它

Answer 1

新图片未添加到DOM中，因为在执行 this.displayCards（cardPair [extraCard - 1]）; 时，我将新推送的卡片作为对象传递给displayCard（）函数。但是displayCards（）函数接受一个数组作为参数并迭代它，因此无法读取该对象。

使用Javascript在DOM上按顺序添加图像

1 个答案: