每当我运行这段代码时,所有的变量和函数都是"未定义",但我没有看到任何错误
这是我的代码,谢谢
<script>
function Random() {
var rand = Math.floor(Math.random() * 600);
}
$(function() {
function Game() {
$("#btn_1", "#btn_2", "#btn_3").fadeIn();
Random()
$("#btn_1").css("margin-left", rand);
Random()
$("#btn_1").css("margin-top", rand);
Random()
$("#btn_2").css("margin-left", rand);
Random()
$("#btn_2").css("margin-top", rand);
Random()
$("#btn_3").css("margin-left", rand);
Random()
$("#btn_3").css("margin-top", rand);
}
});
</script>
</head>
<body>
<button id="start">Start</button>
<button id="btn_1" class="btn">One</button>
<button id="btn_2" class="btn">Two</button>
<button id="btn_3" class="btn">Three</button>
</body>
如前所述,您的rand
变量是一个局部变量,因此在其函数之外不可用。不过,不用声明为全局变量,你可以返回函数的随机值然后使用函数的返回值你也可以像这样链接一些操作我看不出这些代码为什么要放在jQuery ready块中
<script>
function Game() {
function rand() {
return Math.floor(Math.random() * 600);
}
$("#btn_1, #btn_2, #btn_3").each(function() {
$(this).css({"margin-left": rand(), "margin-top": rand()}).fadeIn();
});
}
</script>
</head>
<body>
<button id="start">Start</button>
<button id="btn_1" class="btn">One</button>
<button id="btn_2" class="btn">Two</button>
<button id="btn_3" class="btn">Three</button>
</body>
这样做有以下好处:
- 不需要全局
rand
变量 - 删除使用的副作用
- 减少你评估选择器和创建jQuery对象的次数
- 使你的Game函数在全局作用域中可用,这样你就可以在任何地方调用它(听起来像是你认为你需要的)。
- 删除不需要的jQuery ready块,但将
Random()
函数保留在私有上下文中,因此它不会污染全局命名空间。 - 将多选择器修复为一个字符串,每个子块用逗号分隔(这是多选择器的正确语法)。
- 只计算一次多选择器,并将这些结果用于所有操作。
这里应该可以工作。你的问题是范围。使用var
在函数内声明的内容不能被其他函数访问(当然,除非它们在同一作用域内定义)
你可以这样做并暴露Game。你也可以用同样的方法曝光兰登。
但是,最好将代码保持在作用域或闭包(function() { // your code })();
内,并且只暴露代码的必要部分。
这里有一个很好的阅读范围:http://www.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/
$(function() {
function Random() {
return Math.floor(Math.random() * 600);
}
function Game() {
$("#btn_1", "#btn_2", "#btn_3").fadeIn();
$("#btn_1").css("margin-left", Random());
$("#btn_1").css("margin-top", Random());
$("#btn_2").css("margin-left", Random());
$("#btn_2").css("margin-top", Random());
$("#btn_3").css("margin-left", Random());
$("#btn_3").css("margin-top", Random());
}
window.Game = Game;
});