2016-03-22 5 views
-2

So möchte ich JS programmieren mir ein Layout so zu machen:Wie macht man in diesem Fall eine echte Rekursion?

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

, was ich tat schon ist diese

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/
So gibt es eine Sache, die Sie müssen kennt. Also habe ich einen zufälligen Farbgenerator, und es erzeugt eine zufällige Farben für 3 Blöcke in meinem HTML-Layout. Und das ist nicht die Hauptsache, das ist nur eine Information. Ich möchte nur erklären, dass ich in diesen ersten Codezeilen ein Objekt/Array von Sammlungen mache. Dann nehme ich ein InnerHTML meiner Farbblöcke als einen Hex-Farbcode. Dann nehme ich einen Platz, wo dieses Layout platziert werden sollte (colSpace = document.geti("collection-space")). Und wenn ich ein Layout erzeuge, möchte ich 3 Farben in einer Kollektion haben, wie in Beispiel, aber ich bekomme immer nur eins. Was muss ich in collection[i].appendChild(color) oder anderswo ändern?

+3

Ihre Frage ist sehr verwirrend, bitte machen Sie eine Geige bei https://jsfiddle.net/ und was Sie versuchen zu tun –

+0

Ich sehe nicht, was hat Ihre Frage zu tun mit "Rekursion" –

+0

@SumamaWaheed Wann Ich stelle es aus irgendeinem Grund hinein, es sieht meine Funktionen nicht von JavaScript. Aber sie sind die Hauptsache. Okey, was auch immer, überprüfen Sie es: https://jsfiddle.net/jzheh2cf/ – Godje

Antwort

0

Okey, ich habe bereits ein Problem gelöst. Ich schrieb die ganze for Sache um. Also, wenn Sie ein Mann sind, die für eine Antwort sucht, hier ist mein letzter JS-Code:

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); 
    } 
    } 
} 

Hier gehen Sie Jungs.

Verwandte Themen