是否可以禁用另一个 js 脚本中出现的 jQuery 函数？

Question

有一个 WordPress 网站。现在所有的更改都是在子主题中进行的。在某些页面上有带有计数器框的部分（出现数字从 0 开始计数到给定值）。

HTML 代码如下所示：

<div class="fusion-column-wrapper">
    <div class="fusion-counters-box counters-box fusion-columns-4">
        <div class="fusion-counter-box fusion-column col-counter-box counter-box-wrapper" data-animationoffset="100%">
            <div class="counter-box-container">
                <div class="content-box-percentage content-box-counter">
                    <i class="counter-box-icon fontawesome-icon fa fa-suitcase" aria-hidden="true"></i>
                    <span class="display-counter" data-value="87342" data-direction="up" data-decimals="0">87342</span>
                </div>
                <div class="counter-box-content">PLAQUES POSEES</div>
            </div>
        </div>

        <!-- other columns -->

    </div>
</div>

希望禁用网站上任何位置的所有计数器框中的动画。

运行动画的JS脚本可以在主题提供的一些插件中找到。 \wp-content\plugins use-builder...usion-counters-box.js

!function (o) { "use strict"; o.fn.$fusionBoxCounting = function () { var n = o(this).data("value"), e = o(this).data("direction"), i = o(this).data("delimiter"), t = 0, u = n, r = fusionCountersBox.counter_box_speed, s = Math.round(fusionCountersBox.counter_box_speed / 100); i || (i = ""), "down" === e && (t = n, u = 0), o(this).countTo({ from: t, to: u, refreshInterval: s, speed: r, formatter: function (o, n) { return "-0" === (o = (o = o.toFixed(n.decimals)).replace(/\B(?=(\d{3})+(?!\d))/g, i)) && (o = 0), o } }) } }(jQuery), jQuery(window).on("load fusion-element-render-fusion-counters_box", function (o, n) { (void 0 !== n ? jQuery('div[data-cid="' + n + '"]').find(".fusion-counter-box").not(".fusion-modal .fusion-counter-box") : jQuery(".fusion-counter-box").not(".fusion-modal .fusion-counter-box")).each(function () { var o = jQuery(this), n = getWaypointOffset(jQuery(this)); o.waypoint(function () { o.find(".display-counter").each(function (o, n) { jQuery(n).$fusionBoxCounting() }), this.destroy() }, { offset: n }) }), jQuery(".fusion-modal .fusion-counter-box").on("appear", function () { jQuery(this).find(".display-counter").each(function () { jQuery(this).$fusionBoxCounting() }) }) }), jQuery(window).on("fusion-element-render-fusion_counter_box", function (o, n) { jQuery('div[data-cid="' + n + '"]').find(".display-counter").each(function () { jQuery(this).$fusionBoxCounting() }) });

一个简单的解决方案是在插件的相应文件中进行更改。但如果一旦更新，更改就会丢失。

另一种方法是更改代码（例如，更改类的名称并添加新类的相应样式）。

但我想知道，是否可以在 JS 文件中添加一个函数在子主题中，这将禁用相应元素的任何其他 JS 函数？类似这样的东西：

(function($){

    $(document).ready(function(){

        /** 
         * Disable Animation
         */

        $(".display-counter").on( "appear", function(){

            jQuery.fx.off = true; // right now it doesn't give any effect

        });

    });

})(jQuery);

Answer 1

您可以通过重新分配来覆盖现有的和已定义的函数。对于您给出的示例，您将添加到子主题的

javascript

代码是；

jQuery.fn.$fusionBoxCounting = function(){}

和/或：

$.fn.$fusionBoxCounting = function(){}

但是，使用此方法禁用站点主题的全局功能可能不是一个好主意。它可能会扰乱您意想不到的操作。

我建议您删除要禁用其动画效果的 HTML 元素的

display-counter

类值，并添加

javascript

代码，该代码将添加到页面末尾，但会在主题的原始

javascript 之前运行

文件。像这样的东西：

var elements = document.getElementsByClassName("display-counter");

for (var i = 0; i < elements.length; i++) {
  elements[i].classList.remove("display-counter");
}