放置 Jquery 脚本标签

Question

我在 show.html.erb 中遇到错误 Uncaught TypeError: $(...).popover is not a function。弹出窗口在我的导航栏中，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> 时，错误消失但我的插件不工作。我的弹出窗口在其他页面上运行良好，我的插件看起来像这样。它在我的 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和css里app/assets/stylesheets

更改文件路径：

<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 脚本标签

Putting Jquery script tag

jquery

ruby-on-rails

script-tag