So drucken Sie einen Code innerhalb von JavaScript-Schleife

Question

Ich habe eine Javascript-Schleife und ich möchte meinen HTML-Code darin anzeigen, wie wenn ich echo in PHP verwenden, druckt der Code dort. Dies ist, was ich bisher versucht:

<div class="colorpick"> 
    <script language="javascript"> 
     for (var i = 0; i < 2; i++) { 
     domument.write('<div class="pick" style="background-color:'+ list[i] + '" onclick="hello(this.style.backgroundColor);"></div>'); 
     } 
    </script> 
</div> 

Answer 1

try{ 
    var strContent = ""; 
    for(var i=0; i<2; i++) { 
     strContent += "<div class=\"pick\" style=\"background-color:" + list[i] + "\" onclick=\"hello(this.style.backgroundColor);\"></div>"; 
    } 
    document.write(strContent); 
} catch(ex) { 
    alert(ex); 
} 

Die Exception-Handler nur da ist, damit Sie wissen, wenn etwas anderes nicht stimmt.

Answer 2

Der ursprüngliche Code hatte einen Tippfehler (Domument - weshalb es nicht funktionierte), aber Sie können dies effizienter mit jQuery tun (da Ihre Frage mit jQ markiert ist) - durchlaufen Sie Ihre Liste und fügen Sie sie dann an zum div im HTML - Beachten Sie, dass ich jedem div eine bg-Klasse mit der aufgelisteten Farbe hinzugefügt habe.

Dies ermöglicht eine externe CSS-Ansatz für das Styling der divs, anstatt Inline-Styling, die Sie hatten. Es ist viel besser, das CSS aus dem HTML zu entfernen, wenn du kannst. Gleiches gilt für das JavaScript - Entfernen aus dem HTML und Hinzufügen in das Skript über einen Event-Handler ermöglicht eine bessere Code-Struktur.

$(document).ready(function(){ 
 
    var str=""; 
 
    var list=["red","green","blue"]; 
 
    
 
    for (i = 0; i < list.length; i++) { 
 
     str += "<div class='pick bg-"+ list[i] +"'>Click Me</div>"; 
 
    } 
 
    
 
    $('.colorpick').append(str); 
 

 
    $('.pick').on('click',function(){alert($(this).css('background-color'))}); 
 

 
})

.bg-red{background:red} 
 
.bg-green{background:green} 
 
.bg-blue{background:blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="colorpick"></div>