我有一个有很多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')
呢?不建议这样做吗,因为我正在用它做很多动画。
干杯
如果你真的想缓存对象,在这种情况下你可以使用一个对象,
比如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)
与其给它们一个唯一的 id,不如将相同的类添加到所有类中 - 或使用现有的 cube
类。 然后,您只需为动画选择具有该类的所有内容。
var toAnimate = $('.cube');