Question

我对数组值有疑问。我想要以下代码：

cubes[0].animate({ top: fixedOffs.top+row*20, left: fixedOffs.left-row*5, 'background-color': '#1f2c8a'}, Math.floor(Math.random()*1800));
cubes[1].animate({ top: fixedOffs.top+row*20, left: fixedOffs.left-row*4, 'background-color': '#3d809a'}, Math.floor(Math.random()*1800));
cubes[2].animate({ top: fixedOffs.top+row*20, left: fixedOffs.left-row*3, 'background-color': '#1f2c8a'}, Math.floor(Math.random()*1800));
cubes[3].animate({ top: fixedOffs.top+row*20, left: fixedOffs.left-row*2, 'background-color': '#510000'}, Math.floor(Math.random()*1800));
// until ...
cubes[300].animate({ top: fixedOffs.top+row*20, left: fixedOffs.left-row*4, 'background-color': '#3d809a'}, Math.floor(Math.random()*1800));

我想要做的是剪切整数并在for循环中用i填充它。

类似的东西：

  for (var i = 0; i < 300; i++) {
cubes[i].animate({ top: fixedOffs.top+row*20, left: fixedOffs.left-row*5, 'background-color': '#1f2c8a'}, Math.floor(Math.random()*1800));
cubes[i].animate({ top: fixedOffs.top+row*20, left: fixedOffs.left-row*4, 'background-color': '#3d809a'}, Math.floor(Math.random()*1800));
cubes[i].animate({ top: fixedOffs.top+row*20, left: fixedOffs.left-row*3, 'background-color': '#1f2c8a'}, Math.floor(Math.random()*1800));
cubes[i].animate({ top: fixedOffs.top+row*20, left: fixedOffs.left-row*2, 'background-color': '#510000'}, Math.floor(Math.random()*1800));
// until ...
cubes[i].animate({ top: fixedOffs.top+row*20, left: fixedOffs.left-row*4, 'background-color': '#3d809a'}, Math.floor(Math.random()*1800)); 
}

因为我不想输入每一个数字直到300。应该有类似函数的东西找到方括号并用数字填充它。其中的难点是，每个立方体上的动画属性都不同。（但我已经拥有了它们）

由于

Answer 1

将变量属性保存在某处：

var props = [
  { left : 5, bgColor: '#123' },
  { left : 4, bgColor: '#456' },
  { left : 2, bgColor: '#fff' },
  ...
  { left : 3, bgColor: '#f00' } 
];

然后使用循环：

for (var i = 0; i < cubes.length; i++) {
  cubes[i].animate(
    { 
      top: fixedOffs.top+row*20,
      left: fixedOffs.left-row * props[i].left,
      'background-color': props[i].bgColor
    },
    Math.floor(Math.random()*1800)
  );
}

Answer 2

引入一个索引变量i并将其与每个数组访问一起递增，如下所示：

var i = 0;
cubes[i++].animate({ top: fixedOffs.top+row*20, left: fixedOffs.left-row*5, 'background-color': '#1f2c8a'}, Math.floor(Math.random()*1800));
cubes[i++].animate({ top: fixedOffs.top+row*20, left: fixedOffs.left-row*4, 'background-color': '#3d809a'}, Math.floor(Math.random()*1800));
cubes[i++].animate({ top: fixedOffs.top+row*20, left: fixedOffs.left-row*3, 'background-color': '#1f2c8a'}, Math.floor(Math.random()*1800));
cubes[i++].animate({ top: fixedOffs.top+row*20, left: fixedOffs.left-row*2, 'background-color': '#510000'}, Math.floor(Math.random()*1800));
// until ...
cubes[i++].animate({ top: fixedOffs.top+row*20, left: fixedOffs.left-row*4, 'background-color': '#3d809a'}, Math.floor(Math.random()*1800));

使用支持正则表达式的文本编辑器，您可以搜索i++并将其替换为cubes\[\d+\]，将现有的硬编码索引替换为cubes[i++]。

Answer 3

使用.eq()

.get()和[]返回本机dom元素，而不是jQuery集合。

如果你要制作300件动画，我建议你放弃jQuery。

切出数组值并用var i填充它

3 个答案: