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

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

用class替换所有id

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

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

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

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

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

代替

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

将id改为class，则变为:

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

你的jquery变成:

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

相关内容

最新更新

热门标签：