编辑

Question

当前，我正在尝试附加这个新的playerhand div类，然后尝试附加一个在我的代码中其他位置定义的数组-playerHand。它是一个包含花色/值（扑克牌）的数组，我正在尝试将其显示在DOM上。

现在，当我单击交易按钮时，div出现在DOM上，但是div上没有任何显示。我已经尝试过text（），append（），add（）和val（），但到目前为止还没有。

当我使用text（）方法时，它返回一个对象数组。

let suits = ["♦", "♣", "♥", "♠"],
values = ["A", 2, 3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K"],
deckOfCards = [],
suit,
value,
points = { A: 11, J: 10, Q: 10, K: 10 },
playerHand = [],
dealerHand = [];


for (const suit of suits) {
 for (const value of values) {

  deckOfCards.push({suit, value, points: points[value] || value});
 }
}

const dealRandomCard = () => {
 return deckOfCards.splice(Math.floor(Math.random() * 
  deckOfCards.length), 1)[0];
}

// console.log(dealRandomCard());


for (let i = 0; i < 2; i++) {
  playerHand.push(dealRandomCard());
  dealerHand.push(dealRandomCard());
}


 $(() => {

  $('.deal').on('click', () => {
   $('.gamebox').append('<div class = playerhand > </div>')
   $('.playerhand').append(playerHand)

  // $('.playerhand').text(playerHand)
  // $('.playerhand').val(playerHand)
  // $('.playerhand').add(playerHand)

  })
});

Answer 1

编辑

您期望将对象数组附加到DOM。制作div并将对象附加到其上不会将其强制转换为字符串。您必须处理从这些对象中提取数据，然后将它们作为字符串附加到DOM。不必担心麻烦，只需在将卡片对象推入卡座的位置生成标签即可。

不知道您的阵列的性质，所以这可能是您的问题。本演示使用字符串数组，更具体地说是HTML entities数组。周围的$(() => {...});是个谜，所以我删除了它。除了数组和前面提到的代码谜以外，您的代码未更改。

演示

let suits = ["♦", "♣", "♥", "♠"],
  values = ["A", 2, 3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K"],
  deckOfCards = [],
  points = {
    A: 11,
    J: 10,
    Q: 10,
    K: 10
  },
  playerHand = [],
  dealerHand = [];


for (const suit of suits) {
  for (const value of values) {
    const score = points[value] || value;
    const card = `<figure class="card" data-points="${score}">
             <figcaption class="face">${suit}</figcaption>
             ${value}</figure>`;
    deckOfCards.push(card);
  }
}

const dealRandomCard = () => {
  return deckOfCards.splice(Math.floor(Math.random() *
    deckOfCards.length), 1)[0];
};

// console.log(dealRandomCard());


function deal(whom) {
  const node = whom === 'player' ? $('.playerHand') : $('.dealerHand');
  const hand = whom === 'player' ? playerHand : dealerHand;
  hand.push(dealRandomCard());
  node.html(hand);
}

$('.deal').on('click', () => {
  deal('player');
  deal('dealer');
});

.gamebox {
  display: table;
  min-width: 54px;
}

.deal {
  font-size: 24px;
  margin-left: 70%;
}

.playerHand,
.dealerHand {
  display: table-row
}

.card {
  display: table-cell;
  font-size: 32px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #000;
  border-radius: 6px;
  width: 54px;
  line-height: 1.2
}

.face {
  font-size: 32px;
  text-align: left;
  line-height: 1;
}

<div class='gamebox'>
  <div class='dealerHand'></div>
  <div class='playerHand'></div>
</div>
<button class='deal'>Deal</button>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

我不认为您可以将数组附加到div上，尝试使用它（我知道这不是很漂亮）：

$('.deal').on("click", function() {
  var playerHand = ["King Ace", "King Heart"];  // and so on
  var container = document.createElement('div');
  //A string containing a series of divs and the contents of the Array.
  container.innerHTML = '<div>' + playerHand.join('</div><div>') + '</div>';
  //append inner divs to outer div
  $('.gamebox').append(container);
});

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
</head>

<body>
  <button class="deal">click Me</button>
  <div class="gamebox"></div>
</body>

</html>

Answer 3

即使只有一个对象，JQuery类选择器也会返回一个对象数组。也许您想尝试：

$('.playerhand:first').append(playerHand);
//OR
$('.playerhand').first().append(playerHand);

或连接两个附加项：

$('.gamebox').append('<div class="playerHand">' + playerHand + '</div>');

第二种解决方案对我来说非常合适：JSFiddle。

此外，不要忘记在每行的末尾添加分号：当您构建大型脚本时，这将使代码更易于阅读（并且更快？）。

jQuery-将元素数组附加到类上，并将其显示在DOM

3 个答案:

编辑

演示