在这种情况下如何进行真正的递归？

Question

所以我想编写 JS 来使我的布局像这样:

<div class="collection">
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
</div>

我已经做了这个

var collections = [
  { collection: ["#000", "#222", "#333"] }
]
function saveColors(){
  var collection = [];
  var colorBlocks = document.getElementsByClassName("colored"),
      colSpace = document.getElementById("collection-space"),
      firstColor = document.getElementById("first");

  var color1 = colorBlocks[0].textContent,
      color2 = colorBlocks[1].textContent,
      color3 = colorBlocks[2].textContent;

  if(firstColor.dataset.first != "true"){
    collections.push({collection: [color1, color2, color3]});
    console.log(collections);
    var collectionBlock = document.createElement('div');
    collectionBlock.className = "collection";
    var color = document.createElement('div');
    color.className = "color";

    for(i=0;i<collections.length;i++){
      colSpace.appendChild(collectionBlock);
      for(x=0;x<collections[i].collection.length;x++){
        var collection = document.getElementsByClassName("collection");
        collection[i].appendChild(color);
      }
    }

  }
}

JSFiddle：https://jsfiddle.net/jzheh2cf/
所以有一件事你必须知道。所以我有一个随机颜色生成器，它为我的 HTML 布局中的 3 个块生成随机颜色。这不是主要的事情，这只是一个信息。我只是想解释一下，在第一行代码中，我正在制作一个 object/array 集合。然后我使用我的色块的内部 HTML 而不是包含十六进制颜色代码。然后我在应该放置此布局的地方 space (colSpace = document.geti("collection-space"))。当我生成布局时，我想在一个集合中有 3 种颜色，例如，但我总是只有一种。我必须在 collection[i].appendChild(color) 或其他任何地方更改什么？

Answer 1

好的，我已经解决了一个问题。我重写了整个 for 东西。所以如果你是一个正在寻找答案的人，这里是我的最终 JS 代码：

var collections = [
  { collection: ["#000", "#222", "#333"] }
]
function saveColors(){
  var colorBlocks = document.getElementsByClassName("colored"),
      colSpace = document.getElementById("collection-space"),
      firstColor = document.getElementById("first");

  var color1 = colorBlocks[0].textContent,
      color2 = colorBlocks[1].textContent,
      color3 = colorBlocks[2].textContent;

  if(firstColor.dataset.first != "true"){
    collections.push({collection: [color1, color2, color3]});
    console.log(collections);

    var collectionBlock = document.createElement('div');
    collectionBlock.className = "collection";

    var color = document.createElement('div');
    color.className = "color";
    color.setAttribute("onclick", "displayCopyPaste(this)");

    var color2 = document.createElement('div');
    color2.className = "color";
    color2.setAttribute("onclick", "displayCopyPaste(this)");

    var color3 = document.createElement('div');
    color3.className = "color";
    color3.setAttribute("onclick", "displayCopyPaste(this)");

    for(i=0; i < collections.length; i++ ){
      colSpace.appendChild(collectionBlock);
      //cN = colorName
      for(cN = 0; cN < collections[i].collection.length; cN++){
        color.innerHTML = collections[i].collection[0];
        color.style.backgroundColor = collections[i].collection[0];

        color2.innerHTML = collections[i].collection[1];
        color2.style.backgroundColor = collections[i].collection[1];

        color3.innerHTML = collections[i].collection[2];
        color3.style.backgroundColor = collections[i].collection[2];
      }
      collectionBlock.appendChild(color);
      collectionBlock.appendChild(color2);
      collectionBlock.appendChild(color3);
    }
  }
}

伙计们，给你们。

在这种情况下如何进行真正的递归？

How to make a true recursion in this case?

javascript

html

for-loop

templating