WordPress jQuery集成

3

我在 jsfiddle 上使用了 jquery,它能正常工作,但是当我将其应用到 WordPress 上时似乎无法工作。我不确定问题出在哪里,是否在 wp 上使用 js 有特殊的语法要求?

https://jsfiddle.net/f911e0yq/9/

在WordPress中(无错误)
在function.php中
function scripts_method() {
    wp_enqueue_script( 'sizetab',  get_stylesheet_directory_uri(). '/js/my.js' , array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'scripts_method' );

在我的.js文件中

(function ($) {
  $('#button').click(
    function() {
      $('.description_tab').removeClass('active');
      $('.additional_information_tab').removeClass('active');
      $('.reviews_tab').removeClass('active');
      $('.ux_global_tab_tab').addClass('active');
    });


})(jQuery);

看起来一切都正常工作。你能提供你使用它的网站URL吗?如果文件正在页面中加载,那么唯一的问题可能是:当你的代码开始工作时,你的按钮未定义。你可以使用这个:wp_enqueue_script('sizetab', get_stylesheet_directory_uri(). '/js/my.js', array('jquery'), null, true);。这将把你的脚本加载到页脚,在你网站的所有内容之后。 - Samvel Aleqsanyan
  1. 进行“查看源代码”。你的脚本是否列出?(搜索my.js)。如果没有,那么你选择的URL是不正确的。
  2. 你是否检查了浏览器的开发者控制台中是否有错误?如果没有,你应该学会使用它——这是开发JavaScript所必需的工具。
  3. 页面上是否有一个id为“button”的元素?如果没有,那么它将无法工作。
  4. 你的脚本没问题——你正在正确地使用它,它不需要任何更改就可以在WP中运行。问题几乎100%与你的脚本文件未加载有关。
- random_user_name
@j08691 - OP使用了无冲突保存的文档准备好函数,是吗?这会将jQuery注入到$变量中,所以一切都应该正常工作,对吗? - random_user_name
它在浏览器控制台上没有产生任何错误。我正在使用Lamp工作,因此无法提供实际的URL。是的,我的源代码在查看源代码中列出。 - JeVic
@JeVic,那你试过我的建议了吗? - Samvel Aleqsanyan
显示剩余4条评论
3个回答

3
正如我所猜测的那样,问题在于您的script在页面内容加载之前已经加载。因此,对于您的代码,#button标签是undefinedwp_enqueue_script()函数的参数如下:
wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

$ver是指脚本的版本,它将被加载(http://website.com/someScript.js?ver=1.0.0)。默认情况下为false。我们使用了null,在这种情况下与false相同:不加载脚本版本,而是加载当前WordPress版本。$in_footer将脚本加载到页面/网站的页眉或页脚中。默认情况下为false(加载到<header>标签中)。

我们使用了以下代码:

function scripts_method() {
    wp_enqueue_script( 'sizetab', get_stylesheet_directory_uri(). '/js/my.js' , array( 'jquery' ), null, true );
}
add_action( 'wp_enqueue_scripts', 'scripts_method' );

我们想要将脚本加载到网站页脚(在所有内容之后),并通过添加null, true(没有版本并且想要加载到页脚)来定义。


1
没有 JavaScript 错误,所以你在控制台看不到任何东西 - JavaScript 代码没问题。问题在于你如何排队你的 js。你需要将它移动到页脚,否则你需要重新绑定事件处理程序,因为它们不存在于 jQuery 定义时。
如果你查看 wp_enqueue_script() 的源文档,你会发现你省略了最后两个参数,$ver$in_footer。为了设置 in_footer 变量,你需要一个版本,所以你可以使用 filemtime 函数或者将其设置为 '''1.0' 或者 null - 然后你就可以将 $in_footer 设置为 true。
function scripts_method() {
    wp_enqueue_script( 'sizetab',  get_stylesheet_directory_uri(). '/js/my.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'scripts_method' );

如果可以的话,将所有自定义JavaScript文件移动到页脚通常被认为是最佳实践。


0
function scripts_method() {
wp_register_script( 'sizetab',get_stylesheet_directory_uri().'js/my.js', array( 'jquery' ), '1.0' );
wp_enqueue_script( 'sizetab' );
}

我使用这个代码块来加载自定义的 .js 文件。

2
只是一个提示:通常情况下,如果您随后立即排队文件,则不需要使用wp_register_script。您可以通过仅使用wp_enqueue_script来简化代码-如果您愿意,您可以阅读比我在此处解释的更多内容:wp_register_script vs. wp_enqueue_script - Xhynk

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接