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

我在试图制作一个盒子的网格，它们都随机地改变颜色。到目前为止，我只能让一个盒子变色。显而易见，但效率非常低的方法是为每个div和动画制作独特的作业......但是必须有另一种方式？多个div具有相同的赋值，为什么jQuery只动画第一个？

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

来源

2013-05-29 AllTheTime1111

你不能有多个具有**相同** ID的项目。 – 2013-05-29 03:32:29

认为它有点像学校。如果你想要一个特定的学生做一些事情，你可以用他们的姓名或学生证来打电话给他们，并告诉他们做些什么。如果你想要一个团队去做某件事，你会告诉他们的CLASS去做一些事情。如果你告诉CLASS做某些事情，然后告诉该班的一名学生（通过他们的ID）做某事，那么具有特定教学的学生将不会违背他的班级的相互矛盾的教学，并直接去做你告诉他们做的事。 TL; DR - 如果任何页面上有超过1个，则使用类，如果是单数和特定的，则使用ID。 – James

用class替换所有的id。

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

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

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

来源

2013-05-29 03:33:45

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

使用class属性代替，如果您想要将相同的类分配给几个元素。

来源

2013-05-29 03:32:40 meagar

而是具有：

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

更改id到class，所以就变成：

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

和你的jQuery变为：

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

来源

2013-05-29 03:34:52

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

回答

相关问题