如何在闭包内移动DOM元素

我试图根据这个答案使用一个闭包来逐步移动DOM元素。 最终我想动态创建许多应该独立移动的DOM元素，这就是我试图在函数中定义变量的原因。

给出答案的例子是

var lightning = new Array(); lightning.push($(".lightning")); var l0 = -210; function thunkAdd(){ var lThis = l0; console.log('set lThis to '+ lThis); return function inc() { console.log('lThis = '+ lThis); return lThis ++; } lightning[0].css("left", lThis); console.log('lightning[0] left = '+lightning[0].css("left")); } var incrementInterval = setInterval(thunkAdd(), 33); 

关于codepen的第一个例子 。 看着控制台，似乎出于某种原因， console.log('lightning[0] left = '+lightning[0].css("left")); 没有运行。

我尝试过的另一种方法是：

 var lightning = new Array(); lightning.push($(".lightning")); var l0 = -210; var lThis = l0; function thunkAdd(){ lThis ++; console.log('lThis = '+ lThis); lightning[0].css("left", lThis); console.log('lightning[0] left = '+lightning[0].css("left")); } var incrementInterval = setInterval(thunkAdd, 33); 

关于codepen的第二个例子 。 这将在屏幕上移动图像，但理想情况下（因为下一步是动态创建和移动许多这些图像）我想在第一次运行thunkAdd函数时定义变量lThis ，然后如果定义了，增加它并使用lThis变量来移动图像。 我怎样才能做到这一点？

Answer 1

正如已经在注释代码中提到的那样，返回后将不会被执行，所以你永远不会改变元素的css left属性，而只是增加变量。

你需要移动lightning[0].css("left", lThis); 正在以间隔执行的内部闭包。

查看更新的示例

您也可以考虑使用jquery的animate而不是this（您也可以使用许多元素或循环执行此操作）

$(".lightning").animate({left: '2000px'}, 10000, 'linear');