Question

我想在其中一个wordpress模板中实现自定义jQuery;

我将这些行添加到functions.php：

function my_custom_script() {
wp_enqueue_script('extra js', get_stylesheet_directory_uri() . '/js/extra.js');
}
add_action('wp_enqueue_scripts', 'my_custom_script');

然后我想看看它是否有效，所以我只是将它添加到我的extra.js文件中：

alert "Hello folks!";

是的，警报出现在屏幕上。高超！

但是，如果我想添加自定义jQuery，让我说我得到了id =“firstBox”的dic：

$('#firstBox').click(function() {
    $('#firstBox').hide();
})

根本没有任何事情发生。

如何在像这样的文件中正确使用jQuery？

Answer 1

确保正确加载jQuery

首先，确保正确加载jQuery。让我们取消注册jquery打包并从CDN加载，以确保我们拥有所需的一切。

function my_jquery_enqueue() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
    wp_enqueue_script('jquery');
}
add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);

现在，将jquery作为依赖项排入脚本。

function my_extra_enqueue() {
    wp_enqueue_script( 'extra_js', get_stylesheet_directory_uri() . '/js/extra.js', array('jquery') );
}
add_action("wp_enqueue_scripts", "my_extra_enqueue");

无冲突

如果您此时仍然遇到问题并且在控制台中看到错误，例如$ is not a function，那么您需要使用.noConflict()变量编写脚本。示例脚本可能如下：

$j = jQuery.noConflict();

$j('#firstBox').click(function() {
    $j('#firstBox').hide();
})

有很多方法可以设置.noConflict()，所以做一些阅读以选择最适合你的方法。阅读：https://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

Answer 2

尝试用jQuery替换$

jQuery('#firstBox').click(function() {
    jQuery('#firstBox').hide();
})

wordpress中的jQuery - 隐藏对象

2 个答案:

确保正确加载jQuery

无冲突