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

【问题标题】：How to make a true recursion in this case?在这种情况下如何进行真正的递归？
【发布时间】：2016-03-22 18:32:40
【问题描述】：

所以我想对 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 个块生成随机颜色。这不是主要的事情，这只是一个信息。我只是想解释一下，在第一行代码中，我正在制作一个对象/集合数组。然后我将我的颜色块的 innerHTML 比包含一个十六进制颜色代码。然后我将占用一个应该放置此布局的空间 (colSpace = document.geti("collection-space"))。当我生成布局时，我想在一个集合中有 3 种颜色，例如，但我总是只得到一种。我需要在collection[i].appendChild(color) 或其他任何地方更改什么？

【问题讨论】：

你的问题很混乱，请在jsfiddle.net 和你想要做什么
我不明白你的问题与“递归”有什么关系
@SumamaWaheed 当我出于某种原因将其放入其中时，它不会从 JavaScript 中看到我的函数。但它们是主要的。好吧，随便看看：jsfiddle.net/jzheh2cf
@SumamaWaheed okey 功能现在可以正常工作，请检查 jsfiddle.net/jzheh2cf

标签： javascript html for-loop templating

【解决方案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);
    }
  }
}

你们去吧。

【讨论】：