这里只是一个简单的问题,我想知道如何将它们设置为init()函数,然后在document.ready上运行该函数.此代码正在单独的main.js文件中使用.是否需要从索引页面调用？
$('#main_right_line_one').click(function(){
$('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){
$('#main_light_layover').fadeIn('slow');
});
});
$('#main_right_line_two').click(function(){
$('#main_light_layover, #main_deep_layover').fadeOut('slow', function(){
$('#main_regular_layover').fadeIn('slow');
});
});
$('#main_right_line_three').click(function(){
$('#main_light_layover, #main_regular_layover').fadeOut('slow', function(){
$('#main_deep_layover').fadeIn('slow');
});
});
任何帮助表示赞赏.我真的试图绕过这个,但我似乎找不到任何好的教程来解释init()足够我的特定代码.
Ant*_*ala 32
不需要特殊的"调用",将它包含在页面上<script src="yourfile.js"></script>,只需将代码包装在下面,以确保在dom准备好后(和元素存在)执行它.
$(function () {
// your code goes here
});
$( a_function )是的$(document).ready( a_function ); 更多关于文档中的现成处理程序.
完全需要$(document).ready(...)/ 的原因$(...)是jquery选择$('#main_right_line_one')只能看到DOM树中执行时出现的元素.但是,<script>标签内容通常在浏览器满足后立即执行; 和<script>元素通常位于<head>.因此,脚本经常会看到不完整的DOM树.现在,由于jQuery的设计,即使$('#main_right_line_one')不匹配任何元素,仍然没有错误; 并且click处理程序将绑定到0个元素.
通过将这种代码包装$(function() { ... })在一起可以避免这一切,这可以确保在完全初始化DOM之后执行其中的任何代码(或者如果它已经被初始化,则立即执行).
原因为什么有像速记$(function() {})的$(document).ready(function() {})是,执行DOM树已经完成后才代码是,几乎每一个单页使用jQuery的会使用这样的必要方式.
Sim*_*ock 23
在您的索引页面中:
<html>
<head>
<title>Your title</title>
</head>
<body>
<!-- Your HTML here -->
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="main.js"></script>
</body>
你是对的,将所有代码包装在一个对象中并用init()函数调用它是一种好习惯.所以在你身上main.js,你可以:
$(document).ready(function() {
myPage.init();
});
然后在下面,您可以像这样定义页面对象:
var myPage = (function() {
var that = {};
that.init = function () {
$('#main_right_line_one').click(function(){
$('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){
$('#main_light_layover').fadeIn('slow');
});
});
$('#main_right_line_two').click(function(){
$('#main_light_layover, #main_deep_layover').fadeOut('slow', function(){
$('#main_regular_layover').fadeIn('slow');
});
});
$('#main_right_line_three').click(function(){
$('#main_light_layover, #main_regular_layover').fadeOut('slow', function(){
$('#main_deep_layover').fadeIn('slow');
});
});
}
return that;
})();
| 归档时间： |
|
| 查看次数： |
72986 次 |
| 最近记录： |