Question

已删除先前的描述，因为它现在不相关。

我从新的gatsby网站开始，能够进行jquery，bootstrap，wow和owl轮播工作。

layout.js

import './expose'
import './main'

expose.js

import 'popper.js'
import 'bootstrap'
import 'animate.css/animate.min.css'
import WOW from 'wowjs/dist/wow.js';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';

new WOW(
    {
        offset: 100,
        mobile: true,
      }
).init();

main.js

;(function($){
    console.log('hello jquery')
    console.log($(window).width())

    /*-------------------------------------------------------------------------------
      Navbar 
    -------------------------------------------------------------------------------*/

    //* Navbar Fixed  
    function navbarFixed(){
        if ( $('.header_area').length ){ 
            $(window).scroll(function() {
                var scroll = $(window).scrollTop();   
                if (scroll){
                    $(".header_area").addClass("navbar_fixed");
                } else {
                    $(".header_area").removeClass("navbar_fixed");
                }
            });
        };
    };
    navbarFixed();

    var $animation_elements = $('.scroll_animation');
    var $window = $(window);

    function check_if_in_view() {
        console.log('check_if_in_view')
      var window_height = $window.height();
      var window_top_position = $window.scrollTop();
      var window_bottom_position = (window_top_position + window_height);

      $.each($animation_elements, function() {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = (element_top_position + element_height);

        //check to see if this current container is within viewport
        if ((element_bottom_position >= window_top_position) &&
          (element_top_position <= window_bottom_position)) {
          $element.addClass('in-view');
        } else {
          $element.removeClass('in-view');
        }
      });
    }


    if($(window).width() > 576){
        $window.on('scroll resize', check_if_in_view);
        $window.trigger('scroll');
    }

    $('.owl-carousel').owlCarousel();

})(window.jQuery)

jquery有时有时无效。

现在，问题是wowjs动画仅执行一次。即使刷新页面也无法再次运行它。猫头鹰轮播有相同的问题。它只会出现一次，然后再也不会出现，甚至在页面刷新时也不会出现。如何使jquery中的main.js代码始终有效？由于实际文件中包含1000行的jquery和jquery插件代码。

Answer 1

您正在WOW中定义layout.js，并尝试在main.js中使用它。这是行不通的。

对此有两种可能的解决方案：

1）将import WOW from "wowjs"添加到main.js，以便在main.js范围内可用（仅在main.js被webpack捆绑时有效）。对我来说，WOW变量中也有WOW.WOW（请控制台并进行相应检查）。

2）自行在WOW中将layout.js附加到窗口并在任何地方使用。这可能是不好的。

更新：

在导入WOW并将其用于任何地方之前，请自行将main.js附加到窗口。

此处的解决方案（检查expose-wow.js和index.js的导入）

react，jquery，gatsby-如何使jquery插件在gatsby中工作？

1 个答案: