jquery - WordPress Jquery 集成

Question

我在 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' );

在 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 (没有版本并希望加载到页脚中)。