將背景影像分配給querySelectorall函式JS

所以我試圖在不使用 CSS 的情況下將背景影像分配給 div 并將其寫入 6 次，所以這是 HTML：

var arImages = ["Chicken_BannerIcon2-1.png", "Chicken_BannerIcon3-1.png",
  "Chicken_BannerIcon4-1.png", "Chicken_BannerIcon5-1.png",
  "Chicken_BannerIcon6-1.png", "Chicken_BannerIcon7-3.png",
]

var menu = document.querySelectorAll(".grid > div::before")

let bg = arImages.map((element) => {
  return element;
})

let newArray = Array.from(menu).map((item) => {
  var img = document.createElement("img")
  img.src = bg
  item.appendChild(img)
  return item
})

<div class="grid pt-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

uj5u.com熱心網友回復：

1. 由于 ，您querySelectorAll沒有找到任何東西::before，所以我洗掉了
2. img.src = bg沒有用，因為它bg和arImages你需要一個索引而不是完整的陣列相同（見第 5 點）
3. 我已將 a 替換map為 a，forEach因為您不需要回傳值
4. 洗掉了Array.from因為forEach存在于節點串列中
5. 使用indexforeach 提供的從中獲取索引arImages

var arImages = [
  "Chicken_BannerIcon2-1.png", "Chicken_BannerIcon3-1.png", 
  "Chicken_BannerIcon4-1.png", "Chicken_BannerIcon5-1.png", 
  "Chicken_BannerIcon6-1.png", "Chicken_BannerIcon7-3.png", 
]

var menu = document.querySelectorAll(".grid > div")

menu.forEach((item, index) => {
    var img = document.createElement("img")
    img.src = arImages[index]
    item.appendChild(img);
})

<div class="grid pt-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

uj5u.com熱心網友回復：

首先，洗掉::before選擇器。

然后，您只需將索引添加到您的 js，然后將其參考到您的影像陣列，如下所示：

var arImages = [
  "Chicken_BannerIcon2-1.png",
  "Chicken_BannerIcon3-1.png",
  "Chicken_BannerIcon4-1.png",
  "Chicken_BannerIcon5-1.png",
  "Chicken_BannerIcon6-1.png",
  "Chicken_BannerIcon7-3.png"
];
document.querySelectorAll(".grid > div").forEach((item, index) => {
  var img = document.createElement("img");
  img.src = arImages[index];
  item.appendChild(img);
});

<div class="grid pt-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

uj5u.com熱心網友回復：

您甚至不需要預定義您的 HTML 專案。您可以對陣列進行編程map，并使用來自每個元素的資料創建一個 HTML 字串陣列，join然后將完整的 HTML 字串應用到容器中。

const arImages=['https://dummyimage.com/50x50/efefef/000000&text=Image1','https://dummyimage.com/50x50/efefef/000000&text=Image2','https://dummyimage.com/50x50/efefef/000000&text=Image3','https://dummyimage.com/50x50/efefef/000000&text=Image4','https://dummyimage.com/50x50/efefef/000000&text=Image5','https://dummyimage.com/50x50/efefef/000000&text=Image6'];

// Just select the container
const grid = document.querySelector('.grid');

// `map` over the array, and for each element return
// an HTML string where the element has background that
// matches the element
const html = arImages.map((img, i) => {
  const style = `background-image: url(${img}); width: 50px; height: 50px`;
  return `<div style="${style}">${i   1}</div>`;
});

// Because `map` returns an array we `join` it up
// into one string, and then add it to the container
grid.insertAdjacentHTML('beforeend', html.join(''));

<div class="grid pt-3"></div>

附加檔案

• 模板/字串文字

• insertAdjacentHTML

標籤：javascript html css

上一篇：無法將按鈕鏈接到模式視窗

下一篇：Python/Selenium僅在類具有特定值時列印 僅在html中列印某些元素