javascript - JQuery循环根据它的类和php数组改变div背景

Question

我有 2 个数组，其中 1 个具有十六进制索引和颜色(没有 #)，另一个具有相应的索引和练习类型。

我想要实现的目标是生成一个时间表，该时间表向包含指定锻炼类型的 div 添加一个类“ExerciseType”+数组中的锻炼索引。就像这样“ExerciseType0”或“ExerciseType1”(完成并正常工作)。然后我尝试使用 jQuery 将背景颜色更改为具有与索引对应的类的 div。

为此我尝试编写一个函数$ColorIndex - 作为键的索引数组和作为值的十六进制颜色.ExerciseType0 等之前没有样式。

<script type=\"text/javascript\" src=\"jquery-1.8.2.js\"></script>
<script type=\"text/javascript\">
    $(document).ready(function(){
        var ColorIndexJS = <?php echo json_encode($ColorIndex) ?>;
        var ColorIndexLength = ColorIndexJS.length;
        var counter = 0;
        while(counter<ColorIndexLength){
            $('.ExerciseType' + counter.toString()).css("background-color", "#"+ColorIndexJS[counter]);
            counter++;
        }
    });
</script>

我从 firebug 中的这段代码得到的结果是

$(document).ready(function(){
var ColorIndexJS = ["FF4040","EEC591","FF7F24"];
var ColorIndexLength = ColorIndexJS.length;
document.write("ExerciseType");
var counter = 0;
while(counter<ColorIndexLength){
$('.ExerciseType' + counter.toString()).css("background-color", "#"+ColorIndexJS[counter]);
counter++;
}
}); 

如此处所示，php_array 已成功转换，但函数本身不想工作。有什么想法吗？

Answer 1

为什么不让 php 写出 CSS 类并且涉及零 JavaScript？

<style>
    .ExerciseType0{background-color:#FF4040;}
    .ExerciseType1{background-color:#EEC591;}
    .ExerciseType2{background-color:#FF7F24;}
</style>

代码失败的原因是 document.write，它替换了页面内容，因为它发生在文档加载之后。