jQuery - добавление массива элементов в класс и отображение его в DOM

Question

В настоящее время я пытаюсь добавить этот новый класс div playerhand, а затем пытаюсь добавить массив - 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 .Окружение $(() => {...}); является загадкой, поэтому я удалил его.Кроме массива и ранее упомянутой загадки кода ваш код остается неизменным.

Демо

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

Селектор класса JQuery возвращает массив объектов, даже если он есть только один.Может быть, вы хотите попробовать:

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

Или объединить оба дополнения:

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

Это второе решение прекрасно работает для меня: JSFiddle .

Кроме того, не забудьте добавить точку с запятой в конце каждой строки: это облегчит чтение (и быстрее?) Кода при создании больших сценариев.

Answer 3

Я не думаю, что вы можете просто добавить массив в 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>