Question

我在Uncaught TypeError: $(...).popover is not a function中收到错误show.html.erb。 Popover在我的导航栏中，show.html.erb有jquery插件（bxslider）。我把我的脚本标记<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>放在show.html.erb的头上，就像

一样

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <!-- bxSlider Javascript file -->
  <script src="/js/jquery.bxslider.min.js"></script>
  <!-- bxSlider CSS file -->
  <link href="/css/jquery.bxslider.css" rel="stylesheet" />
</head>

当我删除<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>时，错误消失但我的插件无效。我的popover在其他页面中运行良好，我的插件看起来像这样。它位于show.html.erb的底部。

<script>

  var $j = jQuery.noConflict();

  var realSlider= $j("ul#bxslider").bxSlider({
        speed:1000,
        pager:false,
        controls: true,
        nextText:'<span></span>',
        prevText:'<span></span>',
        infiniteLoop:true,
        captions: true,
        onSlideBefore:function($slideElement, oldIndex, newIndex){
          changeRealThumb(realThumbSlider,newIndex);

        }

      });

      var realThumbSlider=$j("ul#bxslider-pager").bxSlider({
        minSlides: 8,
        maxSlides: 8,
        slideWidth: 100,
        slideMargin: 12,
        moveSlides: 1,
        pager:false,
        speed:1000,
        controls: true,
        infiniteLoop:false,
        hideControlOnEnd:true,
        nextText:'<span></span>',
        prevText:'<span></span>',
        onSlideBefore:function($slideElement, oldIndex, newIndex){

        }
      });

      linkRealSliders(realSlider,realThumbSlider);

      if($j("#bxslider-pager li").length<5){
        $j("#bxslider-pager .bx-next").hide();
      }

// sincronizza sliders realizzazioni
  function linkRealSliders(bigS,thumbS){

    $j("ul#bxslider-pager").on("click","a",function(event){
      event.preventDefault();
      var newIndex=$j(this).parent().attr("data-slideIndex");
          bigS.goToSlide(newIndex);
    });
  }

//slider!=$thumbSlider. slider is the realslider
  function changeRealThumb(slider,newIndex){

    var $thumbS=$j("#bxslider-pager");
    $thumbS.find('.active').removeClass("active");
    $thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active");

    if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex);
    else slider.goToSlide(slider.getSlideCount()-4);

  }
</script>

Answer 1

首先将所有js文件放入app / assets / javascripts和app / assets / stylesheets中的css

在以下位置更改文件的路径：

<script src="/js/jquery.bxslider.min.js"></script>
  <!-- bxSlider CSS file -->
  <link href="/css/jquery.bxslider.css" rel="stylesheet" />

到

<script src="/assets/jquery.bxslider.min.js"></script>
  <!-- bxSlider CSS file -->
  <link href="/assets/jquery.bxslider.css" rel="stylesheet" />

或者你也可以将这些文件包含在application.js和application.css.scss中：

在application.js文件中

//= require jquery.bxslider.min.js

并在application.css.scss文件中：

 *= require jquery.bxslider

放置Jquery脚本标记

1 个答案: