jquery - ページスワップで多くの問題が発生しています

Question

function pageSwap(page) {
 $(".content").fadeOut("1000",function(){
  $(".content").load(page, function (){
   $(".content").fadeIn("5000");    
  });
 });
}

これはpageswap.jsから私のページに含まれています

<script type="text/javascript">
 $(document).ready(function (){
   $(".content").pageSwap("main.html");
 });
</script>

main.htmlがあり、スクリプトが含まれていて、関数が呼び出されていますが、機能しません。

Answer 1

グローバル関数を宣言しましたが、この関数で jQuery を拡張していません。pageSwap()したがって、以下のように呼び出すだけです。

<script type="text/javascript">
    $(document).ready(function() {
        pageSwap("main.html");
    });
</script>

---

UPDATEpageSwap :次のコードを使用して、メソッドで JQuery を拡張できます。

(function($) {
    $.fn.extend({
        pageSwap: function(page) {
            return this.each(function() {
                var obj = $(this);
                obj.fadeOut("1000", function() {
                    obj.load(page, function() {
                        obj.fadeIn("5000");
                    });
                });
            });
        }
    });
})(jQuery);

ただし、@Esailja の回答で説明されている別の代替アプローチがあります。

Answer 2

コードが機能するには、これを行う必要があります。

$.fn.pageSwap = function(page) {
    this.fadeOut("1000", $.proxy( function(){
        this.load(page, $.proxy( function (){
            this.fadeIn("5000");    
        }, this ));
    }, this ));
};