Question

我正在尝试创建一个JavaScript文件，该文件使用jQuery为按钮创建一个on-click事件。

但我无法让它工作，我甚至不确定脚本是否正在加载。我已经在页面源代码中搜索了它，但它不存在，所以这表明它根本没有加载。我是插件和jQuery的新手，但我遵循了一个教程并复制了下面的代码。

<?php
/*

Plugin Name: PansHousePlugin
Plugin URI:  http://pans-house.com
Description: Adds OnClick and Scroll Functionality
Version: 1.0
Author: Paul Leppard
Author URI: http://pans-house.com

*/


add_action('wp_enqueue_scripts', 'load_js');

   function load_js() {
wp_register_script('click_scroll', plugins_url( 'click_scroll.js', __FILE__), array( 'jQuery'), true );
wp_enqueue_script('click_scroll');
}




?>

和click_scroll.js文件，该文件与plugin.php文件位于同一文件夹中

(function($){

$(function(){
     $("#gopricing").hide();
     $(".showpricingbutton").on("click", function(){
     $("#gopricing").toggle();
  });
});

}(jQuery));

就像我说的那样，正如教程所说的那样。插件被激活而没有任何错误，但是没有隐藏具有id gopricing的div，并且按钮在点击它时没有做任何事情，所以我假设脚本没有被加载。

由于

Answer 1

您列出了一个不存在的依赖项。

jQuery是图书馆的名称;但是，为了加载库，您需要引用它的句柄是jquery。当我相信你试图告诉JS加载页脚时，你也将版本号设置为true。

改变这个：

wp_register_script('click_scroll', plugins_url( 'click_scroll.js', __FILE__), array( 'jQuery'), true );

对此：

wp_register_script( 'click_scroll', plugins_url( 'click_scroll.js', __FILE__ ), array( 'jquery' ), false, true );

你的下一个问题是你的JS。最后一行需要调整括号，您应该等待就绪事件：

(function( $ ) {

    $( document ).ready(function() {
        $( "#gopricing" ).hide();
        $( ".showpricingbutton" ).on( "click", function() {
            $( "#gopricing" ).toggle();
        });
    });

})( jQuery );

进一步阅读：https://developer.wordpress.org/reference/functions/wp_enqueue_script/

测试我的第一个插件 - 脚本没有加载WordPress

1 个答案: