Question

在我的wordpress网站的functions.php中，我有这个代码来调用jquery：

    function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    

add_action('wp_enqueue_scripts', 'my_scripts_method');

但是，此代码与此jquery代码冲突：

$(function() {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-55px'  /* para não elevar muito o separador*/
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'-10px'
                }, 400);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-130px'  /* para baixar o separador para o sitio original*/
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'50px'
                }, 400);
        }
    );
});

我确定这是问题，因为如果我直接在页面的头部调用http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js，插件就可以了。我正在试图避免使用jquery.noConflict来避免同一页面上的其他jquery插件出现问题。

任何提示？

Answer 1

你在哪里加载脚本？

如果它在页脚中，请尝试：

    (function($) {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-55px'  /* para não elevar muito o separador*/
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'-10px'
                }, 400);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-130px'  /* para baixar o separador para o sitio original*/
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'50px'
                }, 400);
        }
    );
})( jQuery );

如果它在标题中，请尝试：

jQuery(document).ready(function( $ ) {  
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-55px'  /* para não elevar muito o separador*/
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'-10px'
                }, 400);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-130px'  /* para baixar o separador para o sitio original*/
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'50px'
                }, 400);
        }
    );
});

Answer 2

很高兴它适合你，但你使用wp_enqueue会更好。

查看此文章http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

您也可以尝试用“jQuery”替换“$”选择器。 Wordpress作为核心的一部分包含了许多库，而$仅用于jQuery。

Jquery函数与Wordpress冲突

2 个答案: