javascript - 修复 Wordpress 中的 JavaScript 冲突，帮助使用 wp_enqueue_script

Question

我认为(不是 100% 确定)我遇到了 javascript 冲突。我正在使用插件在我的 WordPress 页面上生成倒计时时钟，我正在使用一些简单的自定义 javascript 和 jQuery 使 div 在滚动的某些点出现在页面上并消失。

为了使出现/消失的 div 正常工作，我在标题中添加了两个 javascript 调用:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/test1.js"></script> 

第一个是 jquery 库，第二个是我的自定义脚本。将这些代码行添加到标题后，倒计时时钟在我的网站上停止工作。通过一些调试，我意识到是 Google 托管的脚本导致时钟无法正常工作。

当我的 header 中有 Google 托管的 jquery 库的代码时，我收到以下错误:Error = Object [object Object] has no method 'jCountdown'

我相信解决这个问题的方法是使用 functions.php 文件中的 wp_enqueue_script 和 wp_register_script 添加我需要的两个 .js 文件，并从 header 中删除代码。但是，我不熟悉这些代码是如何工作的，似乎无法弄清楚。下面是我认为需要在 functions.php 文件中使用的代码，但我没能成功。

function notSureWhatGoesHere() {
        wp_register_script(notSureWhatGoesHere);
        wp_enqueue_script(notSureWhatGoesHere);
        }

        add_action(notSureWhatGoesHere);

这是我的测试网页的链接:http://jltest.biz/test-1

非常感谢您的帮助和时间。

Answer 1

你有一个Error = Object [object Object] has no method 'jCountdown'

也许您的插件没有正确加载...

删除你添加的 jQuery jQuery.1.10.2 所以我并不惊讶它不起作用..

PLUS - WordPress 已经添加了一个版本的 jQuery.1.8.3

现在，在你的测试文件中你有这个

var startY = 840;
var stopY = 1900;

$(window).scroll(function(){
    checkY();
});

function checkY()
{
    console.log($(window).scrollTop()); 
    if($(window).scrollTop() > startY && $(window).scrollTop() <= stopY)
    {
        console.log("Show"); 

        $('.fixedDiv').fadeIn("slow"); 
    }
    else
    {
        console.log("Hide"); 
        $('.fixedDiv').fadeOut();
    }
}

checkY();

Wordpress 默认使用 jQuery.noConflict(); 所以你需要确保你的代码像下面这样包装

(function( $ ) {

    // Code Here....

}( jQuery ));