使用数组中的值创建元素答案

【问题标题】：Creating elements using values from an Array使用数组中的值创建元素
【发布时间】：2015-03-27 08:45:08
【问题描述】：

嘿，我的阵列需要一些帮助。我可以通过document.getElementById 看到它捕获了我的值，但我希望该值成为 div 中的背景样式。我知道它看起来很混乱 <li> 和 <div> 里面但我真的迷路了，我无法让它工作。

我需要为数组中的每个项目创建一个元素，并将它们的值作为背景颜色。

如果我的问题没有意义，我很抱歉，因为太晚了;-)

var noteColors = [
  { name: "red", value: "#FF396D" }, 
  { name: "green", value: "#C6DD2A" }, 
  { name: "blue", value: "#55C7F0" }, 
  { name: "purple", value: "#F64FC2" }, 
  { name: "yellow", value: "#F6DC2C" }];

<div id="note_colors_wrapper">
  <script type="text/javascript">
    var index;
    var text = "<ul id='colorss'>";

    for (index = 0; index < noteColors.length; index++) {
      text += "<li class='ol'>" + noteColors[index].value + "</li>";
    }
    text += "</ul>";
    document.getElementById("note_colors_wrapper").innerHTML = text;
    $(".ol").append("<div id='lo' style=background-color:" + 
      noteColors[index].value + ";></div>");
  </script>
</div>

最终结果应该是这样的

【问题讨论】：

你能举个例子说明你想要的输出是什么样的吗？
当append()（带有背景色的div）运行时，index 将超过noteColors 数组的末尾。
@DanPrince 我添加了一个 img :-)
@PaulRoub 我该如何解决？ :-)

标签： javascript jquery html css arrays

【解决方案1】：

我会开始稍微重新考虑结构，你可能不希望你的脚本标签在你试图替换其内容的元素中。

为了提高速度和可维护性，使用 HTMLElement API 创建元素更有意义。这涉及使用document.createElement 和element.appendChild 之类的方法，而不是将元素构建为字符串并使用.innerHTML

最后，在您的代码中添加一些函数式数组方法将大大简化您的解决方案。

Array.map 可用于转换数组中的每个项目，使用您选择的函数。

Array.forEach 可用于循环遍历您的数组，而不必担心索引变量。

var items = noteColors.map(function(color) {
  var li = document.createElement('li');
  li.style.backgroundColor = color.value;
  return li;
});

var list = document.createElement('ul');
list.setAttribute('id', 'colors');
items.forEach(list.appendChild);

var wrapper = document.getElementById('note_colors_wrapper');
wrapper.appendChild(list);

【讨论】：

【解决方案2】：

我觉得你困了。因为在我的国家还早，也许我可以帮助你。

发生的事情是你搞砸了你的数组。它超出了脚本标签。

我建议你按如下顺序使用代码。

<html>
<head>
...... your head code
</head>
<body>
... body code

<div id="note_colors_wrapper"></div>

... more body code 

<script>
var noteColors = [
    { name: "red", value: "#FF396D" }, 
    { name: "green", value: "#C6DD2A" }, 
    { name: "blue", value: "#55C7F0" }, 
    { name: "purple", value: "#F64FC2" }, 
    { name: "yellow", value: "#F6DC2C" }];

var index;
var text = "<ul id='colorss'>";

for (index = 0; index < noteColors.length; index++) {
    //Note that in a very simple way, I assign the color in the style parameter of the <li>
    text += "<li class='ol' style='background-color:" + noteColors[index].value + "'>""</li>";
}
text += "</ul>";
document.getElementById("note_colors_wrapper").innerHTML = text;
</script>
</body>
</html>

测试https://jsfiddle.net/tLcxtmow/1/中的代码

希望这会有所帮助。

【讨论】：