0

すべての色がランダムに変化するボックスのグリッドを作成しようとしています。これまでのところ、ボックスの色を変更できるのは 1 つだけです。これを行うための明らかな、しかし非常に非効率的な方法は、各 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 を持つ最初の要素のみを選択します。

ただし、代わりにクラスを使用すると、セレクターはそのクラスを持つすべての要素を選択します。

于 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 に答える