Jquery 函数与 Wordpress 冲突

Posted 2023-02-19

【中文标题】Jquery 函数与 Wordpress 冲突

【英文标题】：Jquery Function conflicts with Wordpress

【发布时间】：2012-07-10 12:56:12

【问题描述】：

在我的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 插件出现问题。

有什么提示吗？

【问题讨论】：

奇怪...我一直这样做，它对我有用。

【参考方案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);
        
    );
);

【讨论】：

它在标题中但没有用。我结束了直接在页面中调用 jquerycorefile 并将 enqueue_script 调用到插件，这种方式是有效的。

【参考方案2】：

很高兴它对你有用，但你最好使用 wp_enqueue。

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

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

【讨论】：

在我的搜索过程中，我也结束了该页面。好吧，现在我将保留此代码。但是，如果我有问题，我会首先尝试该建议。感谢您的帮助。