javascript对象在html页面上工作但无法在wordpress中加载

Question

这段代码在 html 页面上运行良好。 (标题)

var startstop = new (function() {

    var $stopwatch, // Stopwatch element on the page
    incrementTime = 70, // Timer speed in milliseconds
    currentTime = 0, // Current time in hundredths of a second

    updateTimer = function() {
        $stopwatch.val(formatTime(currentTime));
        currentTime += incrementTime / 10;
    },

    init = function() {
        $stopwatch = $('.stopwatch');
        startstop.Timer = $.timer(updateTimer, incrementTime, true);
        startstop.Timer.stop();
    };

    this.resetStopwatch = function() {
        currentTime = 0;
        this.Timer.stop().once();
    };

    $(init);
});

当我尝试在 WordPress 页面上访问它时，其中使用主题函数控制台在 header 中加载了此 javascript，显示 $(init) 不是函数。

Wordpress 中这种对象声明方式有什么问题吗？

Answer 1

这实际上与 WordPress 本身无关，可能与您的 JavaScript 代码/函数未加载或变量 $ 的含义有关

尝试以下操作:

(function ($) {
    $(document).ready(function () {
       // ALL YOUR CODE HERE
    });
}(window.jQuery));

此代码将您的代码包装到一个函数中，该函数将 $ 变量命名为 jQuery，然后立即执行该函数。默认情况下，WordPress uses $.noConflict()它删除了 $ 作为 jQuery 的快捷方式。

$(document).ready 确保在 DOM 完全准备好之前不会执行您的代码。

执行此操作的更短方法可能是这样做:

jQuery( document ).ready(function( $ ) {
  // ALL YOUR CODE HERE
});