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个块的随机颜色。这不是主要的，这只是一个信息。我只是想解释一下，在第一行代码中，我正在创建一个对象/数组的集合。然后我采用我的颜色块的innerHTML而不是包含十六进制颜色代码。然后我将占用一个应该放置此布局的空间（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);
    }
  }
}

在这里你们走吧。

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

1 个答案: