如何遍历对象并将值（颜色）分配给每个正在创建的 div

Question

我正在尝试使用我创建的数据对象将名称输出到 html div，然后将该文本设置为颜色，该颜色也存储在数据。我已经设法将文本输出到 div 中，但是我更愿意添加类名。而且它似乎只是将红色添加到每个 div，这不是我想要的。

所以期望的输出是：

halfords 红色文字 微软 绿色文本 posca 蓝色文字

非常感谢您的帮助，这里有点菜鸟！

const container = document.querySelector("#slider-container");

const data = [
  { name: "halfords", color: "red", logo: "" },
  { name: "microsoft", color: "green", logo: "" },
  { name: "posca", color: "blue", logo: "" }
];

// Iterate through object and adding colours to <div>'s
var divs = document.querySelectorAll("div");
for (const iterator of data) {
  for (let i = 0; i < divs.length; ++i) {
    divs[i].style.color = data[i].color;
  }
}

// Iterating through object and outputting into <div>'s
function createMenuItem(name) {
  let div = document.createElement("div");
  div.textContent = name;
  return div;
}

document.addEventListener("DOMContentLoaded", function () {
  for (let i = 0; i < data.length; i++) {
    container.appendChild(createMenuItem(data[i].name));
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="slider-container"></div>

</body>
</html>

Answer 1

好吧，你得到所描述效果的原因是你有效地遍历了你的所有 div 的 each 数据项 ...

为什么不在 createMenuItem 函数中添加一个 color 参数，并在创建每个菜单项时分配样式一次？

Answer 2

我搞定了，谢谢帮助！我添加了颜色作为参数，它起作用了！！ :))

// Object storing values
const data = [
  { name: "Halfords", color: "orange", logo: "" },
  { name: "Microsoft", color: "green", logo: "" },
  { name: "Posca", color: "blue", logo: "" },
];
// Iterating through object and outputting into <div>'s
function createMenuItem(name, color, logo) {
  let div = document.createElement("div");
  div.textContent = name;
  div.style.color = color;
  div.classList.add("item");
  return div;
}
// Outputting the data into divs using the create item function
const container = document.querySelector("#slider-container");
document.addEventListener("DOMContentLoaded", function () {
  for (let i = 0; i < data.length; i++) {
    container.appendChild(createMenuItem(data[i].name, data[i].color));
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="slider-container"></div>

    <script src="script.js"></script>
</body>
</html>

Answer 3

只是一些建议，不需要循环data。此外，您似乎正在 selecting 所有 div，包括 slide-container。您可以将 class 添加到 createMenuItem 内的 div，然后仅 select 它们。以下是您的操作方法。

const container = document.querySelector("#slider-container");

const data = [
  { name: "halfords", color: "red", logo: "" },
  { name: "microsoft", color: "green", logo: "" },
  { name: "posca", color: "blue", logo: "" },
];

// Iterate through object and adding colours to <div>'s

// Iterating through object and outputting into <div>'s
function createMenuItem(name) {
  let div = document.createElement("div");
  div.textContent = name;
  div.classList.add("item");
  return div;
}

document.addEventListener("DOMContentLoaded", function () {
  for (let i = 0; i < data.length; i++) {
    container.appendChild(createMenuItem(data[i].name));
  }

  var divs = document.querySelectorAll(".item");

  for (let i = 0; i < divs.length; ++i) {
    divs[i].style.color = data[i].color;
  }
});

Answer 4

只有小更新:)

// Iterating through object and outputting into <div>'s
function createMenuItem(preperties) {
  let div = document.createElement("div");
  div.textContent = preperties.name;
div.style.color =  preperties.color
  return div;
}

document.addEventListener("DOMContentLoaded", function () {
  for (let i = 0; i < data.length; i++) {
    container.appendChild(createMenuItem(data[i]));
  }
});

如何遍历对象并将值（颜色）分配给每个正在创建的 div

How do I iterate through an object and assign the values (colors) to each div being created

javascript

html

for-loop

javascript-objects

nested-for-loop