JQuery函数

Question

我正在寻找一种将内容加载到页面中的功能。如果我使用它，这种方式可以正常工作

$(document).ready(function() {

    $('#nav li a').click(function(){                      
        var toLoad = $(this).attr('href')+' #content';
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal',loadContent);
        function loadContent() {
            $('#content').append($('<div>').load(toLoad,'',showNewContent()))
        }
        function showNewContent() {
            $('#content').fadeIn('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;   
    });
});

但是当我想让它发挥作用时

jQuery.addc = function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal',loadContent);
        function loadContent() {
            $('#content').append($('<div>').load(toLoad,'',showNewContent()))
        }
        function showNewContent() {
            $('#content').fadeIn('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;   
};

当我用onclick

调用该函数时，

停止工作

<ul id="nav">

        <li a href="index.html" onclick="$.addc();"> Index </a> </li>
</ul> 

我不知道发生了什么事，因为第一个代码工作正常，但第二个代码没有，如果有人可以帮助我请 我也尝试$.fn.addc = function ()但不能正常工作

Answer 1

仅将内脏提取到函数中：

$(document).ready(function() {
    $('#nav li a').click($.addc);
}); 

$.addc = function() {                    
    var toLoad = $(this).attr('href') + ' #content';

    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal',loadContent);

    function loadContent() {
        $('#content').append($('<div>').load(toLoad,'',showNewContent()))
    }

    function showNewContent() {
        $('#content').fadeIn('normal',hideLoader());
    }

    function hideLoader() {
        $('#load').fadeOut('normal');
    }

    return false;   
};

Answer 2

整个想法（或至少是一个主要想法）是删除内联js。

坚持你的第一个解决方案，

或你可以做的是：

var clicked = function(){
        var toLoad = $(this).attr('href')+' #content';
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal',loadContent);
        function loadContent() {
            $('#content').append($('<div>').load(toLoad,'',showNewContent()))
        }
        function showNewContent() {
            $('#content').fadeIn('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false; 
    }

$('#nav li a').live('click', clicked);  

Answer 3

这是因为this的上下文正在发生变化。您剪切的第一个代码中的this对应于选择器的元素; #nav li a中的一个元素。在您的第二个代码段中，this没有引用相同的内容，因此它不起作用。

此外，当jQuery对象特定于您的实现时，将“静态”函数附加到jQuery对象是不好的形式。您应该将该逻辑提取到方法中，然后调用它：

onclick="myMethod();"

Answer 4

你的背景错了。在原文中，你有：

$(document)，因此this将是文档（或者可能是文档的jQuery包装器）。您需要设置上下文。

例如，创建一个新函数：

function aoeu () {
    $.fn.addc.call(document);
}

我会将$(this)更改为$(document)。这将使您的生活变得更加轻松。

Answer 5

您使用的是this，在第一种情况下是由jQuery传入的，但在第二种情况下，您可以将其传入。

e.g。 onclick="addc(this);"并为您的函数提供function addc(this) {...}

的签名

（不需要为自定义和非常特定的函数重载jQuery名称空间）