单个WordPress页面上的JavaScript函数

Single JavaScript function on individual WordPress Page

本文关键字：JavaScript 函数 WordPress 单个      更新时间：2023-09-26

我已经通读了几篇关于如何将JavaScript添加到WordPress页面的文章，尽管它对我的需求来说过于复杂。我有这个小脚本（见下文），我希望它只在一页上工作。我原以为在主要内容之后将其添加到<script>标签中就可以了，但我在控制台中遇到了以下错误：

未捕获类型错误：未定义不是函数

尽管脚本在控制台中运行良好，但它不起作用。

对于这个脚本，我必须使用复杂的方法还是有更简单的方法？

$('#tSubmit').on('click', function() {
    var amt = +$('#tCount').val(),
        tier = $('#tType').val(),
        h = +$('#tH').val() > 0 ? +$('#tH').val() : 0,
        m = +$('#tM').val() > 0 ? +$('#tM').val() : 0,
        s = +$('#tS').val() > 0 ? +$('#tS').val() : 0,
        time = ((h*60+m)*60+s)/amt;
    alert('Individual time for Tier ' + tier + ' troops: ' + time.toFixed(2) + ' seconds');
});

在WordPress中，jQuery是使用jQuery.noConflict()函数加载的，这意味着$变量被别名为jQuery，以免与其他Javascript库发生冲突。

只要将$替换为jQuery，就可以将javascript包含在页面模板中，甚至包含在帖子内容中（如果您使用的是文本编辑器，而不是视觉编辑器）。

jQuery('#tSubmit').on('click', function() {
    var amt = +jQuery('#tCount').val(),
        tier = jQuery('#tType').val(),
        h = +jQuery('#tH').val() > 0 ? +jQuery('#tH').val() : 0,
        m = +jQuery('#tM').val() > 0 ? +jQuery('#tM').val() : 0,
        s = +jQuery('#tS').val() > 0 ? +jQuery('#tS').val() : 0,
        time = ((h*60+m)*60+s)/amt;
    alert('Individual time for Tier ' + tier + ' troops: ' + time.toFixed(2) + ' seconds');
});

如果您不想更改代码，可以将jQuery变量传递到以$为参数的函数中，并按原样使用代码。

(function($){
    // your code goes here and jQuery is known as $
    // $(document).on()... or whatever
})(jQuery);

为什么不尝试为该功能创建一个单独的js文件（并在jQuery（document）.ready（）上执行它），然后用wp_enque_script（'scrip-name'，'script-url'，array（'jQuery'））从页面中引用它呢。这将使您的脚本在加载jQuery之后加载。

相关文章：