react，jquery，gatsby - 如何让jquery插件在gatsby中运行？ [英] react, jquery, gatsby - how to make jquery plugins work in gatsby?

问题描述

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

我开始使用新的gatsby网站并且能够制作jquery，bootstrap，哇和owl carousel work。

I started with fresh gatsby site and able to make jquery, bootstrap, wow and owl carousel work.

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 有时候工作有时没有。

jquery sometimes work sometimes not.

现在，问题是wowjs动画只执行一次。即使我刷新页面也无法再次运行它。 owl carousel有同样的问题。它出现一次，然后在页面刷新时再也不会出现。如何在 main.js 中一直使用 jquery 代码？由于实际文件有1000行jquery和jquery插件代码。

Now, the issue is wowjs animation executes only once. Not able to run it again even If I refresh the page. owl carousel has the same issue. It appears once and then never appears back not even on page refresh. How do I make jquery code in main.js work all the time ? As the actual file has 1000 lines of jquery and jquery plugin code.

推荐答案

您正在定义 WOW 在 layout.js 中并尝试在 main.js 中使用它。这不起作用。

You are defining WOW in layout.js and trying to use it in main.js. This won't work.

有两种可能的解决方案：

There are two possible solution to this:

1）添加从wowjs导入WOW到 main.js ，以便它在 main.js的范围内可用（仅当webpack捆绑了 main.js 时才有效）。另外对我来说 WOW 在 WOW.WOW 变量中可用（控制台并相应地检查）。

1) Add import WOW from "wowjs" to main.js so that it's available in the scope of main.js(works only if main.js is being bundled by webpack). Also for me WOW is available in WOW.WOW variable(console and check accordingly).

2）在 layout.js 中自行附加 WOW 并使用它任何地方。这可能很糟糕。

2) Attach WOW to window by yourself in layout.js and use it anywhere. This is probably bad.

更新：

附加 WOW 在导入 main.js 之前自己开窗并在任何地方使用它。

Attach WOW to window by yourself before importing main.js and use it anywhere.

这篇关于react，jquery，gatsby - 如何让jquery插件在gatsby中运行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！