0

我正在尝试制作一个所有随机改变颜色的盒子网格。到目前为止，我只能让一个盒子改变颜色。显而易见但非常低效的方法是为每个 div 和动画相应地分配唯一的分配......但必须有另一种方法？？？

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<style>
#box {
    background-color:blue;
    padding:10px; 
    border:7px solid black; 
    width: 25; 
    height:25; 
    float:left; 
    box-shadow: 2px 2px 5px black;
    margin:10px;}
</style>
</head>
<body>
<pre><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div></pre>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function() {  

     spectrum();  

     function spectrum(){  
        var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';  
        $('#box').animate( { backgroundColor: hue }, 1000);  
        spectrum();  
     }  

    });  
</script>

</body>
</html>
4

3 回答 3

3

用类替换你所有的id。

<div class="box"></div>

如果您在元素上多次使用 ID，则选择器只会选择具有该 ID 的第一个元素。

但是当您改用 class 时，选择器将选择所有具有该类的元素。

于 2013-05-29T03:33:45.480 回答
2

该id属性必须是唯一的。您不能在多个元素中重复使用它。就目前而言，您的文件无效。

class如果要将相同的类分配给多个元素，请改用属性。

于 2013-05-29T03:32:40.610 回答
1

而不是：

<div id="box"></div>

将 更改id为 a class，因此变为：

<div class="box"></div>

你的jQuery变成：

$('.box').animate( { backgroundColor: hue }, 1000);
于 2013-05-29T03:34:52.313 回答