0

私は多くのdivを持つウェブサイトを持っています:

var cubes = [];
var allCubes = '';
for(var i = 0; i < 857; i++) {
    var randomleft = Math.floor(Math.random()*1000),
        randomtop = Math.floor(Math.random()*1000);
    allCubes += '<div id="cube'+i+'" class="cube" style="position: absolute; left: '+randomleft+'px; top: '+randomtop+'px; width: 7px; height: 7px; z-index: -1"></div>';
}  

$('body').append(allCubes);

css3-transition を使用してすべての div をアニメーション化したいので、別のループを実行してすべての ID を指定します。

for(var i = 0; i < 857; i++) { 
    cubes.push($('#cube'+i));   
}

しかし、どうすればすべての$('#cubeX')in 変数をキャッシュできますか? 私はそれを使ってたくさんのアニメーションをやっているので、それをすることをお勧めしませんか.

乾杯

4

2 に答える 2

2

オブジェクトを本当にキャッシュしたい場合は、この場合、次のようなオブジェクトを使用できます

var cubes = {};
var allCubes = '';
for (var i = 0; i < 857; i++) {
    var randomleft = Math.floor(Math.random() * 1000),
        randomtop = Math.floor(Math.random() * 1000);
    allCubes += '<div id="cube' + i + '" class="cube" style="position: absolute; left: ' + randomleft + 'px; top: ' + randomtop + 'px; width: 7px; height: 7px; z-index: -1"></div>';
}

$('body').append(allCubes);
for (var i = 0; i < 857; i++) {
    cubes['cube' + i] = $('#cube' + i)
}

function getCube(index){
    var cube = cubes['cube' + index];
    if(!cube){
        cube = $('#cube' + index);
        cubes['cube' + index] = cube;
    }
    return cube;
}

//then you can access the cubes via
getCube(1)
getCube(2)
getCube(3)
于 2013-11-06T03:38:41.967 に答える
0

それらすべてに一意の ID を与える代わりに、それらすべてに同じクラスを追加するか、既存のcubeクラスを使用します。その後、アニメーション用にそのクラスのすべてを選択できます。

var toAnimate = $('.cube');
于 2013-11-06T02:56:56.140 に答える