Question

我有一个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>

Answer 1

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

这允许使用外部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>

Answer 2

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

异常处理程序可以让你知道是否有其他错误。

如何在javascript循环中打印代码

2 个答案: