Question

这是插件的原始代码

$('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');
                    }

                }
        }
    }
}

我想覆盖

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

带

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

除了将整个ajax代码复制到此

之外，还有一种更简单的方法

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

我无法单独使用css进行更改。这是结帐按钮，只有在添加产品后才会显示。

非常感谢任何帮助。

Answer 1

最好的方法是重新定义您引用的插件代码。没有很好的方法来挂钩该插件。

一些不那么好的钩子方法是：

重新定义jQuery $.fn.css方法，以便它首先调用原始jQuery css方法，然后检查当前调用是否涉及设置inline-block显示的调用特定元素的样式：如果是，则立即应用更正：

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

您可以使用MutationObserver检测目标元素上的任何属性更改。触发后，检查是否涉及特定的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 })
});

这些方法都不值得推荐，主要是因为代码变得难以理解。

覆盖jquery函数

1 个答案: