Назначение фоновых изображений функции querySelectorall JS

поэтому я пытаюсь назначить фоновые изображения для div без использования CSS и пишу его примерно 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>

bg такой же, как arImages, это новый массив со всеми значениями arImages

— 16.03.2022 16:51

если вы хотите отобразить карту, вы можете сделать .map((item,index)=>{ ..... }). используйте индекс, чтобы добавить его, чтобы получить arImages по отдельности, вместо того, чтобы назначать, вероятно, в зависимости от того, что вы пытаетесь сделать

— 16.03.2022 16:53

javascript html css

16.03.2022 16:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Сначала удалите селектор ::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>

16.03.2022 16:53

Ответ принят как подходящий

Ваш querySelectorAll ничего не нашел из-за ::before, поэтому я удалил это
img.src = bg не сработало, потому что bg было таким же, как arImages, и вам понадобится один индекс вместо полного массива (см. пункт 5)
Я заменил map на forEach, так как вам не нужно возвращаемое значение
Удален Array.from, потому что forEach существует в нодлисте
Использование index, предоставленного foreach, для получения индекса из 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>

Вам даже не нужен Array.from. forEach отлично работает с нодлистами (я думаю, что это единственный метод массива).

— 16.03.2022 16:56

Спасибо за помощь, но я видел, где я ошибся

— 16.03.2022 16:57

Рад, что это помогло. См.: что мне делать, когда кто-то ответит на мой вопрос?. Приветствуется голосование или принятие любых ответов, которые помогли.

— 16.03.2022 16:59

Без проблем, сделаю

— 16.03.2022 17:02

Другое дело, что они предназначены для фоновых изображений для каждого div @0stone0.

— 16.03.2022 17:31

16.03.2022 16:54

Вам даже не нужно предварительно определять элементы 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(''));