Fatal编程技术网
  • javascript/
  • Javascript 猫头鹰转盘不与轨道一起工作

Javascript 猫头鹰转盘不与轨道一起工作

javascript jquery ruby-on-rails

Javascript 猫头鹰转盘不与轨道一起工作,javascript,jquery,ruby-on-rails,owl-carousel,Javascript,Jquery,Ruby On Rails,Owl Carousel,猫头鹰转盘无法与我的rails安装一起使用。它没有显示在我的测试页面上，并且这个错误出现在Chrome开发者控制台中： 未捕获类型错误：未定义不是函数 我已经按照上面的指示做了 和 以下是rails中的相关代码： **GemFile** gem 'owlcarousel-rails' **app/assets/application.js** //= require jquery //= require jquery.turbolinks //= require jquery_ujs //=

猫头鹰转盘无法与我的rails安装一起使用。它没有显示在我的测试页面上，并且这个错误出现在Chrome开发者控制台中：

未捕获类型错误：未定义不是函数

我已经按照上面的指示做了

和

以下是rails中的相关代码：

**GemFile**
gem 'owlcarousel-rails'

**app/assets/application.js**
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require owl.carousel
//= require_tree .

**app/assets/stylesheets/application.css**
*= require_tree .
*= require_self 
*= require owl.carousel
*= require owl.theme

**home.html.erb**
<body>
...
<div class="owl-carousel" col-lg-12">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>
...
</body>
<script>
$(document).ready(function(){
 $('.owl-carousel').owlCarousel({
    autoPlay: 3000,
    item: 3
 });
});
</script>

**文件**
宝石“猫头鹰转盘轨道”
**app/assets/application.js**
//=需要jquery
//=需要jquery.turbolinks
//=需要jquery\u ujs
//=需要涡轮链路
//=需要引导
//=需要owl.carousel
//=需要一棵树。
**app/assets/stylesheets/application.css**
*=需要一棵树。
*需要自己
*=需要owl.carousel
*=需要owl.theme
**home.html.erb**
...

我在我的一个rails项目中使用了OWLcarousel。你不必安装gem。尝试从文件中删除该行。确保application.js中的owl.carousel.js和application.css中的owl.*.css路径正确。然后重新启动服务器


另外，我建议将任何外部js（owl.carousel.js）和css（owl.carousel.css、owl.theme.css）移动到vendor/assets/
 您应该检查您的javascript文件，因为您似乎有一个额外的初始值设定项，Chrome Dev Tools错误证明了这一点：


$（'owl carousel'）.owlCarousel（）

这和你的想法完全不同


$('.owl-carousel').owlCarousel({
  autoPlay: 3000,
  item: 3
});



之所以出现此错误，是因为
$（“#owl carousel”）
返回了一个空对象，因为您没有id='owl-carousel'的对象。
我想您在中有一个额外的引号


<div class="owl-carousel" col-lg-12"> 



为了防止其他有此问题的人看到此页面，我构建了一个快速回购，演示了嵌入引导网格中的
owlcarousel rails
gem的工作版本。我还解释了我在
自述文件
中所做的更改

我知道有时候人们需要一起查看所有的工作部件，才能准确地找出哪里出了问题

回购协议：

看看
app/assets/javascripts
，
app/assets/stylesheets
，最重要的是
app/views/static\u pages/carousel\u in_grid.html.erb


希望这有助于某人：）
jquery。turbolinks
在所有其他
require
语句之后放置
require turbolinks
。您尝试过这样做吗？更改了初始值设定项行以调用class.owl carousel，但在javascript控制台中仍然会出现相同的错误：
Uncaught TypeError:undefined不是一个函数
。这可能是一个长期的问题，但是也许你在你的app/views/layouts/application.html.erb文件中遗漏了
这一行吗？改变了这一点，添加了以下文件：
owl.carousel.js~>vendor/assets/javascripts
和
owl.carousel.css
和
owl.theme.css~>vendor/assets/stylesheet
。删除宝石以及。重新启动，检查了标题中的源代码，并查看了对文件的引用，但仍然有相同的结果。您忘记添加它应该更改的内容；）感谢您在$（“#owl carousel”）之前提供了$（document）.ready（function（）{}）。owlCarousel（{}）解决了我在owl carousel中遇到的问题

<div class="owl-carousel col-lg-12">