WordPress中的jQuery-无法解决问题:“未捕获的引用错误:jQuery未定义”

9nvpjoqh  于 2023-04-29  发布在  WordPress
关注(0)|答案(2)|浏览(240)

我知道这个主题已经有很多问题提交了,但我已经被卡住了几个小时。我不能让jQuery与WordPress一起工作。我已经检查和反复检查,并阅读了无数关于这方面的文章。任何帮助或建议将是非常欢迎的。

  • 我刚刚开始在一个新的WordPress网站,所以有最小的插件。
  • 我使用主题:2017年,一个儿童主题基于此。

在我使用的测试页面上,在控制台中我看到“Uncaught ReferenceError:jQuery未定义”
下面是我的代码:
脚本文件名为testjQuery。js.内容为:

jQuery(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});

儿童主题的内容功能。php文件是:

function add_my_script() {
    wp_enqueue_script('testjQuery', home_url() . '/wp-content/themes/twentyseventeen-child/resources/js/testjQuery.js', array('jquery'));
}
    add_action( 'wp_enqueue_scripts', 'add_my_script' );

我使用的是带有“测试模板”的PAGE。内容如下:

<?php 
/* 
Template Name: temp_jQuery
Template Post Type: Page
/?>

<head>
    <script type='text/javascript' src='https://stunninghikes.com/evenbetterhikes/wp-content/themes/twentyseventeen-child/resources/js/testjQuery.js'></script>
</head>

<body>
    <p>If you click on me, I will disappear.</p>
    <p>Click me away!</p>
    <p>Click me too!</p>
</body>

我试过各种各样的组合,把什么放在哪里。没有乐趣。这是我第一次尝试将jQuery添加到我的网站,所以我确信我犯了一个初学者错误-我是一个初学者。

0x6upsns

0x6upsns1#

页面模板应包含get_header();函数,然后才开始页面内容。如果你不想在这个模板中包含标题,那么在页面的顶部应该包含一个wp_head();函数。
出现jQuery错误是因为您没有包含jquery。这个模板中的js库。wp_head()包含页面中包含的所有必需的JS和CSS库。

<?php 
/* 
* Template Name: temp_jQuery
* Template Post Type: Page
*/
?>

<head>
    <script type='text/javascript' src='https://stunninghikes.com/evenbetterhikes/wp-content/themes/twentyseventeen-child/resources/js/testjQuery.js'></script>
    <?php 
        get_header(); 
        /* OR */ 
        wp_head();
    ?>    
</head>


<body>
    <p>If you click on me, I will disappear.</p>
    <p>Click me away!</p>
    <p>Click me too!</p>
</body>

<?php get_footer(); ?>

此外,如果您没有在此模板上包含页脚,则必须在模板底部包含get_footer();,或者在页面底部包含wp_footer();

nue99wik

nue99wik2#

只需要使用**$**as函数参数来定义$作为jQuery

jQuery(document).ready(function($) {
    $("p").click(function(){
        $(this).hide();
    });
});

或者你可以尝试下面的代码:

(function($){
    $("p").click(function(){
        $(this).hide();
    });
});

相关问题