Question

这里只是一个简单的问题，我想知道如何将它们设置为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（）的好教程。

Answer 1

不需要特殊的“调用”，将其包含在<script src="yourfile.js"></script>的页面上，只需将代码包装在下面，以确保在dom准备好后（以及元素存在）执行它。

$(function () {
   // your code goes here

});

$( a_function )是$(document).ready( a_function )的缩写;更多关于ready handlers in the documentation。

根本需要$(document).ready(...) / $(...)的原因是像$('#main_right_line_one')这样的jquery选择只能看到DOM树中执行时出现的元素。但是，<script>标记内容通常在浏览器满足后立即执行; <script>元素通常位于<head>。因此，脚本经常会看到不完整的DOM树。现在，由于jQuery的设计，即使$('#main_right_line_one')与任何元素都不匹配，仍然没有错误;并且click处理程序将绑定到0个元素。

通过在$(function() { ... })中包装这种代码可以避免这一切，这可以确保在完全初始化DOM之后执行其中的任何代码（或者如果已经初始化了DOM，则立即执行）。

为$(function() {})提供像$(document).ready(function() {})这样的简写的原因是，只有在完成DOM树之后才执行代码是一种必要的模式，几乎每个使用jQuery的页面都会使用

Answer 2

在索引页面中：

<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;

})();

在jQuery中设置init函数

2 个答案: