在WordPress网站上加载jQuery时出现问题

时间:2017-10-19 作者:Bradley

请协助,我正试图在我的Wordpress网站上加载此Jquery,但运气不好。

我在</body> 标记我的函数。php:

<script type="text/javascript"
   src="<?php bloginfo("template_url"); ?>/js/menu-hover.js"></script>
我在函数的中使用了此代码。php文件:

<?php
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script(\'jquery\');
   wp_register_script(\'jquery\', "http" . ($_SERVER[\'SERVER_PORT\'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/js/jquery.min.js", false, null);
   wp_enqueue_script(\'jquery\');
}
?>
这是我的Jquery/Javascript代码:

jQuery( "#panel-2-1-0-0" ).hover( //Print and Document
    function() {
        jQuery(\'#mega-menu-item-475\').addClass(\'mega-toggle-on\');
    }, function() {
        jQuery(\'#mega-menu-item-475\').removeClass(\'mega-toggle-on\');
    }
);

jQuery( "#panel-2-1-1-0" ).hover( //Telecom
    function() {
        jQuery(\'#mega-menu-item-477\').addClass(\'mega-toggle-on\');
    }, function() {
        jQuery(\'#mega-menu-item-477\').removeClass(\'mega-toggle-on\');
    }
);

jQuery( "#panel-2-1-0-1" ).hover( //IT Dev
    function() {
        jQuery(\'#mega-menu-item-476\').addClass(\'mega-toggle-on\');
    }, function() {
        jQuery(\'#mega-menu-item-476\').removeClass(\'mega-toggle-on\');
    }
);

jQuery( "#panel-2-1-1-1" ).hover( // Safety and Security
    function() {
        jQuery(\'#mega-menu-item-478\').addClass(\'mega-toggle-on\');
    }, function() {
        jQuery(\'#mega-menu-item-478\').removeClass(\'mega-toggle-on\');
    }
);

2 个回复
SO网友:Jacob Peattie

  1. Don\'t enqueue your own version of jQuery. 您只会导致与其他插件的冲突问题,并且您的脚本中没有需要不同版本的内容just load the https:// version, 没有理由费心检查您自己的服务器在做什么!is_admin() 在您的排队功能上,wp_enqueue_scripts 甚至没有在管理中运行
  2. 不要在模板中添加脚本标记,请使用wp_enqueue_script().get_theme_file_uri().</body> 标记我的函数。php:“你的意思不是</body> 标签位于函数中。php你呢
总之,在函数中,您的代码应该就是这样。php文件:

function wpse_283386_enqueue_scripts() {
    wp_enqueue_script( \'menu-hover\', get_theme_file_uri( \'js/menu-hover.js\' ), array( \'jquery\' ), \'\', true );
}
add_action( \'wp_enqueue_scripts\', \'wpse_283386_enqueue_scripts\' );
在这之后,它不起作用的唯一原因是:

脚本中目标ID不存在

  • /wp-content/themes/{your theme}/js/menu-hover.js 不存在
  • SO网友:Bradley

    This is the code I am using in the themes functions.php, exactly as advised:

    enter image description here

    This is the path where menu-hover.js exists:

    enter image description here

    结束

    相关推荐

    使用jQuery有条件地隐藏快速编辑中的元素

    我想使用jQuery根据另一个分类法的复选框状态,有条件地从快速编辑框中隐藏一些分类法。我有一家WooCommerce进口商店。根据产品类别分类法,产品分为两个基本分组:产品类别时尚食品但根据产品类别,每种产品都有一系列不同的分类:原产国-时尚;食品时尚品牌时尚食品时尚类别时尚食品时尚季节时尚性别时尚鉴于这是相当多的分类法,我决定隐藏分类法,仅根据产品类别分类法中是否单击食品或时尚来显示分类法。这对于产品编辑管理屏幕非常有用。我将要隐藏的分类法元框的css设置为不显示,并为它们创建了一个经过修改的css类