时间戳

首页 > 解决方案 > jQuery 库和代码不工作 - 控制台抛出 0 错误

javascript - jQuery 库和代码不工作 - 控制台抛出 0 错误

问题描述

在过去的 4 个小时里，我一直在尝试调试一个似乎在困扰我的问题。

我最初尝试实现infinite-scroll.js（在此处找到：https ://infinite-scroll.com/ ）并且我一生都无法让它工作，所以我现在放弃并继续前进。

然后我继续尝试实现slidebars.js（在这里找到：https ://github.com/adchsm/Slidebars ）并得到了相同的结果。绝对没有任何功能，但控制台抛出 0 个错误。

脚本正在加载并且在查看页面源时可见。

所以我只能假设我的脚本排队顺序或类似的东西出了问题。

这是我的队列列表位于functions.php

/**
 * Enqueue scripts and styles.
 */
function sativa_scripts() {
    wp_enqueue_style( 'sat-style', get_stylesheet_uri(), array(), _S_VERSION );
    wp_style_add_data( 'sat-style', 'rtl', 'replace' );

    wp_enqueue_style( 'bootstrap-css', get_stylesheet_directory_uri() . '/css/bootstrap.css', array(), true );

    wp_enqueue_style( 'font-awesome', 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array() );

    wp_enqueue_style( 'add_google_fonts', 'https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;800;900&display=swap', false );

    wp_enqueue_script( 'sat-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );

    wp_enqueue_script( 'sat-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), _S_VERSION, true );

    wp_enqueue_script( 'sat-js', get_template_directory_uri() . '/js/sat-js.js', array('jquery'), true );

    wp_enqueue_script( 'jquery', get_template_directory_uri() . 'https://code.jquery.com/jquery-3.5.0.js', array(), '20120206', true );

    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', array('jquery'), true );

    wp_enqueue_script( 'cookie-js', get_template_directory_uri() . '/js/js.cookie.min.js', array('jquery'), true );

    wp_enqueue_script( 'slide-bars-js', get_template_directory_uri() . '/js/slidebars.js', array('jquery'), true );

    wp_enqueue_style( 'slide-bars-css', get_stylesheet_directory_uri() . '/css/slidebars.css', array(), true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'sat_scripts' );

下面是根据滑块指令实现的代码：

在我archive-product.php的标签下方：</header>

<div canvas="container">
    </div>

    <div off-canvas="id-1 left reveal">
    </div>

    <script>
      ( function ( $ ) {
        // Initialize Slidebars
        var controller = new slidebars();
        controller.init();

        // Toggle Slidebars
        $( '.toggle-id-1' ).on( 'click', function ( event ) {
          // Stop default action and bubbling
          event.stopPropagation();
          event.preventDefault();

          // Toggle the Slidebar with id 'id-1'
          controller.toggle( 'id-1' );
        } );
      } ) ( jQuery );
    </script>


<div class="container shop-section">
    <button class="toggle-id-1" data-toggle="tooltip" data-placement="top" title="Use our Advanced Filters to find the perfect product.">FILTER</button>

任何帮助表示赞赏，因为我觉得这可能是我许多痛苦的原因。尽管在控制台或查询监视器中抛出了 0 个错误，但我似乎无法弄清楚为什么这些库不起作用。

标签： javascriptjquerywordpresswoocommercewordpress-theming

解决方案

首先，您不需要将 jQuery 文件排入队列，它是 WordPress 代码的一部分，您可以将其添加为依赖项（就像您已经做过的那样）。

但是您的问题是，您的脚本中的按钮（带有$( '.toggle-id-1' )）在它实际出现在页面上之前 - 您的脚本高于您的 HTML。这就是为什么 jQuery 只是找不到该元素并忽略您要分配给 click 事件的所有内容。

请注意，您在页脚中加载了所有脚本（这是一种正确的方法），因此您所要做的就是将您的自定义脚本移动到页脚（之前</body>）或将其移动到单个文件中并将其排入队列并wp_enqueue_script提供所有您需要的依赖项。

推荐阅读