Question

我正在尝试制作一个随机改变颜色的盒子网格。到目前为止，我只能改变一个盒子的颜色。显而易见但非常低效的方法是相应地为每个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>

Answer 1

将所有身份证替换为班级。

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

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

但是当你使用类时，选择器将选择具有该类的所有元素。

Answer 2

id属性必须是唯一的。您无法跨多个元素重复使用它。目前，您的文档无效。

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

Answer 3

而不是：

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

将id更改为class，使其变为：

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

你的jquery变成了：

$('.box').animate( { backgroundColor: hue }, 1000);

多个具有相同赋值的div，为什么jQuery只为第一个设置动画？

3 个答案: