javascript - 将图像元素数组分配给 DOM id

Question

我有一个表示 .png 元素的 URI 数组，例如“./img/diamond-red-solid-1.png”。

我想将数组“gameDeck[0]、gameDeck[1] 等的每个元素分配给 HTML 中的 div id。我需要将元素标识为 = SRC.IMG 吗？

var gameDeck[];
var gameBoardCards = function () {
    for (let cardArr of cardsToLoad)
    gameDeck.push("./img/" + cardArr + ".png");
}

gameBoardCards();

document.addEventListener('DOM Content Loaded', function () {
  gameDeck[0] = document.getElementById("card1");
  gameDeck[1] = document.getElementById("card2");
  etc.      
});        

Answer 1

我对你的问题的理解是，你想在你的 HTML 中使用 card1、card2、card3...card12 等 ID 定位 div。

您想将 img 标签插入到每个 div 中，其中 src 是 gameDeck 数组的 URI。

下面的代码实现了这一点。我已经测试过了，它工作正常。希望对您有所帮助:)

 document.addEventListener('DOMContentLoaded', function () {
  //iterate through the gameDeck array.
  for (let x = 0;x < gameDeck.length;x++){
    //create an img tag for each gameDeck element
    var imgElement = document.createElement("img"); 
    //set the source of the img tag to be the current gameDeck element (which will be a URI of a png file)
    imgElement.src = gameDeck[x];

    //target the div with id "card(x + 1)" 
    var cardID = "card" + (x + 1);
    var cardElement = document.getElementById(cardID);

    //append the img tag to the card element
    cardElement.appendChild(imgElement);   
  } 
  //log the HTML to the console to check it
  console.log(document.getElementById('body').innerHTML);
});