如何在javascript循环中打印代码

How to print a code inside javascript loop

本文关键字：打印 代码 循环 javascript      更新时间：2023-09-26

我有一个javascript循环，我想在其中显示我的html代码，就像我在PHP中使用echo一样，代码会在那里打印出来。这就是我迄今为止所尝试的：

<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>

原始代码有一个拼写错误（domument-这就是它不起作用的原因），但使用jQuery可以更有效地做到这一点（因为你的问题用jQ标记）-循环浏览你的列表，然后将其附加到HTML中的div-注意，我为每个div添加了一个bg-class，并列出了颜色。

这允许使用外部CSS方法对div进行样式设置，而不是使用内联样式设置。如果可以的话，最好将CSS排除在HTML之外。与javascript相同——从HTML中删除并通过事件处理程序将其添加到脚本中可以获得更好的代码结构。

$(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>

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

异常处理程序只是让您知道是否有其他问题。

相关文章：