jQuery 无法在我的 WordPress 网站上运行

Question

我已尽一切努力使我的 jQuery 代码起作用，其中 none 似乎起作用了。我已经检查以确保 JavaScript 脚本正在排队并加载到浏览器源代码中，并且确实如此。我还查看了 JavaScript 控制台是否有错误，没有发现任何错误。站点位于“http://twps.psadeaf.org/v3/”。我正在加载的脚本是 "init.js".

我正在使用以下代码对脚本进行排队：

// Adding init file in the footer
wp_enqueue_script( 'init-js', get_template_directory_uri() . '/assets/js/init.js', array( 'jquery' ), '', true );

那么无效的jQuery代码是：

jQuery(window).scroll(function() {
   if (scroll >= 50) {
     jQuery('.psad-nav-button').show()
     jQuery(".psad-nav").hide()
   }
   if (scroll < 50) {
     jQuery(".psad-nav").show()
     jQuery('.psad-nav-button').hide()
   } 
});

下面是应该受其影响的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-sticky-container>
  <div data-sticky data-options="marginTop:0;" data-sticky-on="small" style="width:100%">
    <div class="title-bar psad-nav" data-responsive-toggle="top-bar-menu" data-hide-for="<?php echo $breakpoint ?>">
      <button class="menu-icon" type="button" data-toggle></button>
      <div class="title-bar-title">
        <?php _e( 'Menu', 'jointswp' ); ?>
      </div>
    </div>

    <div class="top-bar psad-nav" id="top-bar-menu">
      <div class="top-bar-left show-for-<?php echo $breakpoint ?>">
        <?php do_action( 'psad_site_logo', '200px' ); ?>
      </div>
      <div class="top-bar-right">
        <?php joints_top_nav(); ?>
      </div>
    </div>
    <button class="psad-nav-button expanded button" type="button">
      ^ Navigation ^
    </button>
  </div>
</div>

我在我的主题中使用 Zurb 的 foundation 6 for Sites。最初的主题是 JOINTSWP。当用户向下滚动页面时，我正在使用粘性插件使 navigation/header 粘在页面顶部。我正在使用“.scroll() api”通过 "psad-nav" 和 "psad-nav-button" class 对其进行修改。使用“.show()”和“.hide()”api 在向下滚动页面后显示和隐藏 classes。

我试过使用其他 api，但我的网站上没有任何效果。

Answer 1

您的条件正在比较 scroll 的值，但 scroll 是全局命名空间中的一个函数。检查一个函数是否大于或小于一个整数是没有意义的，returns false。你的 if 陈述总是错误的，而且永远不会发生。

Answer 2

您尚未定义 if 条件中使用的变量 scroll。 scroll 的值应该是 document.body.scrollTop 以获取文档中的当前滚动位置。

jQuery(window).scroll(function() {
   var scroll = document.body.scrollTop;
   if (scroll >= 50) {
     jQuery('.psad-nav-button').show()
     jQuery(".psad-nav").hide()
   }
   if (scroll < 50) {
     jQuery(".psad-nav").show()
     jQuery('.psad-nav-button').hide()
   } 
});

Answer 3

谢谢大家的回复，感觉自己很聪明！ ;) 哈哈你必须原谅我，我已经有一段时间没有和 JavaScript 一起工作了。我也很惊讶它没有在 JavaScript 控制台中抛出任何错误。我正在从 tuts+ 教程中获取代码。我没有注意到他们遗漏了变量 "scroll" 的声明。我修复了它并且它工作得很好但后来也意识到我正在命名一个与 jQuery 中的全局函数同名的变量。如果这就是为什么它没有在 JavaScript 控制台中为未定义的变量抛出错误，我很伤心。我最终也更改了变量名以避免冲突。

下面是我最终使用的代码：

jQuery(window).scroll(function() {
    var psad_scroll = jQuery(this).scrollTop();
    var psad_nav = jQuery( ".psad-nav" );
    var psad_nav_button = jQuery( ".psad-nav-button" );

    function psad_show_nav() {
        if (Foundation.MediaQuery.atLeast( "medium" )) {
            psad_nav.show();
            psad_nav_button.addClass( "hide" ) ;
        }
    }

    function psad_hide_nav() {
        if (Foundation.MediaQuery.atLeast( "medium" )) {
            psad_nav_button.removeClass( "hide" );
            psad_nav.hide();
        }
    }

    if (psad_scroll >= 30) {
        psad_hide_nav();
        psad_nav_button.on({
            click: psad_show_nav,
            mouseenter: psad_show_nav
        });

    }
    if (psad_scroll < 30) {
        psad_show_nav();
    }
});

现在这对我来说完美无缺，谢谢所有帮助我的人。这是实现我所寻找目标的最佳方式吗？如果没有，您将如何实现？

jQuery 无法在我的 WordPress 网站上运行

jQuery is not Working on my WordPress Site

javascript

wordpress

jquery

themes