无法改变jQuery对象变量。这是范围问题吗？

Question

我有一个简单的脚本，用箭头键在屏幕上移动精灵。我想在名为$('#sprite')的变量中包含对$s的引用。但根据我声明和初始化$s的位置，我得到一个工作函数或一个非工作函数。这是为什么？

编辑：不同之处在于我声明并初始化$s。我不小心把相同的代码片段放了两次，但现在已经修复了。

这不起作用：

$(document).ready(main());

function main(){
	
	var $s = $("#sprite");
	var time = 'fast';
	
	$(document).keydown(function(e){
//			var $s = $("#sprite");
			console.log($s);
			key = e.which
			switch(key){
				case 37: //left
					$s.animate({left: "-=10px"}, time);
					console.log("left");
					break;
				case 38: //up
					$s.animate({top: "-=10px"}, time)
					console.log("up");
					break;
				case 39: //right
					$s.animate({left: "+=10px"}, time)
					console.log("right");
					break;
				case 40: //down
					$s.animate({top: "+=10px"}, time)
					console.log("down");
					break;
				default:
					break;
			}
			
	});
};

这有效：

$(document).ready(main());

function main(){
	
//	var $s = $("#sprite");
	var time = 'fast';
	
	$(document).keydown(function(e){
			var $s = $("#sprite");
			console.log($s);
			key = e.which
			switch(key){
				case 37: //left
					$s.animate({left: "-=10px"}, time);
					console.log("left");
					break;
				case 38: //up
					$s.animate({top: "-=10px"}, time)
					console.log("up");
					break;
				case 39: //right
					$s.animate({left: "+=10px"}, time)
					console.log("right");
					break;
				case 40: //down
					$s.animate({top: "+=10px"}, time)
					console.log("down");
					break;
				default:
					break;
			}
			
	});
};

Answer 1

不同之处在于你是否在keydown处理程序或外部声明$s？让我们从一开始就看看发生了什么：

$(document).ready(main());

您正在调用函数main，并将其返回值传递给$(document).ready()。这不是你想要做的。在这里，main立即执行。你想要的是：

$(document).ready(main);

没有括号，只是将引用传递给函数。

为什么重要？

当你立即调用该函数时，DOM还没有准备就绪，如果在外部函数中定义了$s则没有值。但是当你在内部函数中设置它时，$s在你按一个键之前不会被设置，然后该元素就存在了。

所以，真的，任何一个应该工作。问题在于其他代码行。

Answer 2

两个代码都相同。

改变第一行..

{
    "environment":"dev"
}