Question

我已经阅读了一些关于如何将JavaScript添加到WordPress页面的文章，尽管它似乎过于复杂，无法满足我的需求。我有这个小脚本（见下文），我希望它只能在1页上工作。我想在主要内容完成之后将其添加到<script>标签内，但我在控制台中收到以下错误：

未捕获的TypeError：undefined不是函数

即使脚本在控制台中运行正常，它也不起作用。

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

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

Answer 1

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

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

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

Answer 2

为什么不尝试为此功能创建一个单独的js文件（并在jQuery（document）.ready（）上执行它），然后使用wp_enqueue_script从页面中引用它（＆＃39 ;脚本名称＆＃39;，＆＃39;脚本网址＆＃39;，数组（＆＃39; jQuery＆＃39;））。这将使你的脚本在加载jQuery后加载。

单个WordPress页面上的单个JavaScript函数

2 个答案: