WordPress Jquery Integration

Question

我在jsfiddle上做了一个jquery，它在那里工作正常，但是当我将其应用于wordpress时，它似乎不起作用。我不确定出了什么问题，在 wp 上使用 js 时是否有特殊的语法？

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

在WordPress中(没有错误(

在功能上.php

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

在 my.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);

Answer 1

正如我所猜测的，问题是您的script在页面内容加载之前加载的。因此，#button代码undefined标记。

wp_enqueue_script()函数参数为：

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

$ver是脚本的版本，将加载(http://website.com/someScript.js?ver=1.0.0(。默认情况下，它是 false .我们使用了 null ，在这种情况下是一样的：不加载脚本版本并加载当前的 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(没有版本，想要加载到页脚中(。

Answer 2

没有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 文件移动到页脚是一种最佳做法。

Answer 3

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

我使用此代码块加载自定义.js文件