オーバーライドjqueryの機能

Question

これは私が

$('.edd_go_to_checkout').removeAttr('style').css('display', 'block'); 

で

$('.edd_go_to_checkout', container).css('display', 'inline-block'); 

を上書きするプラグイン

$('body').on('click.eddAddToCart', '.edd-add-to-cart', function (e) { 

     e.preventDefault(); 

     var $this = $(this), form = $this.closest('form'); 

     var variable_price = $this.data('variable-price'); 
     var price_mode  = $this.data('price-mode'); 

     $.ajax({ 
      type: "POST", 
      data: data, 
      dataType: "json", 
      ...... 
      success: function (response) { 
       if(edd_scripts.redirect_to_checkout == '1' && form.find('#edd_redirect_to_checkout').val() == '1') { 

        window.location = edd_scripts.checkout_page; 

       } else { 

        if(variable_price == 'no' || price_mode != 'multi') { 
         // Switch purchase to checkout if a single price item or variable priced with radio buttons 
         $('a.edd-add-to-cart', container).toggle(); 
         $('.edd_go_to_checkout', container).css('display', 'inline-block'); 
        } 

       } 
     } 
    } 
} 

から元のコードである他は、その後、全体をコピーする簡単な方法はありますこのAjaxコードを

$("body").off(".eddAddToCart",".edd-add-to-cart").on("click.eddAddToCart",".edd-add-to-cart",function(e){ 
.... 
}); 

私はcssだけでこれを変更することはできません。これはチェックアウトボタンで、商品が追加された後にのみ表示されます。

ご迷惑をおかけして申し訳ありません。

Answer 1

実際には、引用したプラグインコードを再定義するのが最善の方法です。そのプラグインにフックする良い方法はありません。

フックするそれほど素敵ではないいくつかの方法があります：それは最初のオリジナルのjQuery cssメソッドを呼び出しますが、その後、現在のコールが懸念かどうかをチェックするように

1. は、jQueryの$.fn.css方法を再定義します呼び出しは、あなたの特定の要素のためのinline-block表示スタイルを設定作られた：あなたはどのATTを検出するために、MutationObserverを使用することができ

   var orig_fn_css = $.fn.css; 
   $.fn.css = function() { 
       orig_fn_css.apply(this, arguments); 
       if (arguments.length == 2 && arguments[0] == 'display' && arguments[1] == 'inline-block') { 
        $(this).filter('.edd_go_to_checkout').removeAttr('style').css('display', 'block'); 
       } 
       return this; 
   } 
   

2. ：もしそうなら、あなたはすぐに修正を適用しますターゲット要素上のリブートが変化する。トリガされたとき、あなたはそれが特定のinline-block表示スタイルの変更に関するかどうかを確認し、行動を修正：

   var observer = new MutationObserver(function(mutations) { 
       mutations.forEach(function(mutation) { 
       if (mutation.attributeName == 'style' && mutation.target.style.display == 'inline-block') { 
        // Correct wrong assignment of the 'inline-block' display style: 
        $('.edd_go_to_checkout').removeAttr('style').css('display', 'block'); 
       } 
       });  
   }); 
   
   $('.edd_go_to_checkout').each(function() { 
       observer.observe(this, { attributes: true }) 
   }); 
   

これらの方法はいずれも、コードが理解しにくくなる主な理由は、推奨されます。