出现错误：“$(...).carousel 不是函数”虽然我已经包含了 JQuery、Bootstrap.min.css 和 Bootstrap.min.js答案

【问题标题】：Getting error: "$(...).carousel is not a function" although I've included JQuery, Bootstrap.min.css and Bootstrap.min.js出现错误：“$(...).carousel 不是函数”虽然我已经包含了 JQuery、Bootstrap.min.css 和 Bootstrap.min.js
【发布时间】：2017-05-13 05:44:04
【问题描述】：

之前有人问过这个问题，我已经搜索了每个线程。不幸的是，它们都与我的情况无关。

我正在尝试制作一个多幻灯片旋转木马，按照这里的代码笔：https://codepen.io/anon/pen/OmZppE

我的<head> 中有以下链接的脚本/CSS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

所以我假设我已经正确地包含了 Jquery 和 Bootstrap（css 和 js）。然而当我执行这个脚本时

$('.multi-item-carousel').carousel({
  interval: false
});

// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

我收到错误：“Uncaught TypeError: $(...).carousel is not a function”

想法？

编辑：忘记实际轮播的 html，忽略里面的 erb 代码。与问题无关。

<div class="carousel slide multi-item-carousel" id="theCarousel">
    <div class="carousel-inner">
    <% profile.ventures.each_with_index do |v, index| %>
    <% if index == 0 %>
        <div class="item active">
    <% else %>
        <div class="item">
    <% end %>
        <div class="col-xs-4">
        <%= link_to v do %>
           <div class="image-box">
                 <img src="http://placehold.it/600x450" class="thumbnail img-responsive">
                     <div class="image-box-caption">
                        <b>
                      <span class="image-box-text"><%= v.title %></span>
                    </b>
                      </div>
                      <div class="image-box-price">
                        <b><span class="image-box-text" style="color: white;">From $<%= v.price %></span></b>
                      </div>
            </div>
        <% end %>
        </div>
      </div>
     <% end %>
    </div>
    <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
    <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
  </div>

【问题讨论】：

要么是旧的 jQuery 库问题，要么是 https 的跨域问题
@AlivetoDie 我切换到你提供的那些链接，它没有改变，甚至清除了缓存。

标签： jquery html twitter-bootstrap

【解决方案1】：

https://codepen.io/anon/pen/YVLQop

添加：

$(document).ready(function() {
  console.log( "ready!" );
});

【讨论】：

猜我什至不需要 .carousel 函数