创建 2 个子 Div 的细分并在附加的子 Div 上添加动态唯一 ID？答案

【问题标题】：Create 2 subdivs of child Div and add Dynamic unique ID on Appended Child Divs?创建 2 个子 Div 的细分并在附加的子 Div 上添加动态唯一 ID？
【发布时间】：2020-07-20 07:44:54
【问题描述】：

我目前正在构建一个二十一点游戏，每次按下“hit”时，我都会运行这个函数，它会附加代表从牌组中拉出的牌的 div。

我可以为 div 设置一个 ID，但我希望每个 ID 的值都增加...所以 div1、div2、div3。目前，每个 div 都获得相同的 ID，这在尝试向每张卡片添加值时将毫无用处。

我遇到的另一个问题是尝试向这个新的“卡片”div 添加另外 2 个子 div（每个都有唯一的 ID），我可以用卡片的“花色”和“价值”填充。

这是我目前的功能......

function hitMe() {

var playerCards = document.getElementById("playerCards");
let newCard = document.createElement("div");
newCard.textContent = "Hello";
playerCards.appendChild(newCard);
newCard.setAttribute("id", "id_Here");

}

所以一旦我创建了每张卡片，我希望将“Hello”替换为卡片价值和卡片套装。

可以使用此套牌/玩家创建方法获得卡值和卡套

var suits = ["&spades", "&hearts", "&diams", "&clubs"];
var values = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"];

var deck = new Array();

function createDeck() {
deck = new Array();
  for (var i = 0; i < values.length; i++) {
    for (var x = 0; x < suits.length; x++) {
      var weight = parseInt(values[i]);
      if (values[i] == "J" || values[i] == "Q" || values[i] == "K") weight = 10;
      if (values[i] == "A") weight = 11;
      var card = { Value: values[i], Suit: suits[x], Weight: weight };
      deck.push(card);
    }
  }
}



var players = new Array();
function createPlayers(num) {
  players = new Array();
  for (var i = 1; i <= num; i++) {
    var hand = new Array();
    var player = { Name: "Player " + i, ID: i, Points: 0, Hand: hand };
    players.push(player);
  }
}

function deal() {
  for (var i = 0; i < 2; i++) {
    for (var x = 0; x < players.length; x++) {
      var card = deck.pop();
      players[x].Hand.push(card);
      renderCard(card, x);
      updatePoints();
    }
  }
  updateDeck();
}

如果有人对上面列出的代码有一个更简化的解决方案以及如何解决这个问题，我会非常高兴。谢谢

【问题讨论】：

标签： javascript html arrays dom blackjack

【解决方案1】：

您可以使用 playerCards 中前一个元素的 id 来定义当前 id。对于花色和价值的唯一 ID，您可以根据卡片的 ID 确定自己。

这是一个例子：

function hitMe() {
  var playerCards = document.getElementById("playerCards")
  let newCard = document.createElement("div")
  newCard.innerText = "Hello"

  // Card ID
  let cardID
  if(playerCards.lastChild === null) { // create first id if no childs
    cardID = 'card1'
  } else {
    // take the id number of previous elem and increment by one
    let number = parseInt(playerCards.lastChild.id.substring(3,playerCards.lastChild.id.length))
    cardID = 'card' + (number + 1)
  }

  // suit and value id
  let valueDIV = document.createElement("div")
  let suitDIV = document.createElement("div")

  let valueID = cardID + '-value'
  let suitID = cardID + '-suit'

  // set some custom values
  valueDIV.innerText = "some number"
  suitDIV.innerText = "some suit"

  // set ids and append elems
  newCard.id = cardID
  valueDIV.id = valueID
  suitDIV.id = suitID

  newCard.appendChild(valueDIV)
  newCard.appendChild(suitDIV)
  playerCards.appendChild(newCard)
}

【讨论】：

【解决方案2】：

您不需要使用createElement，只需使用insertAdjacentHTML 和template literals：

var id = 0;

function hitMe(card) {
  var playerCards = document.getElementById("playerCards");
  playerCards.insertAdjacentHTML('beforeend',
  `<div id='card${id}' class='card'>
     <div id='suit${id}' class='suit'>${card.Suit}</div>
     <div id='value${id}' class='value'>${card.Value}</div>
   </div>`);
  id++;
}

【讨论】：