HTML：

Question

来自http://www.eyecon.ro/bootstrap-slider/的bootstrap-slider插件存在轻微问题。

获取此错误：未捕获TypeError：对象[object Object]没有方法'slider'

从以下代码：

<head>
<link href="./bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="./bootstrap/css/custom.css" rel="stylesheet">
<link href="./bootstrap/css/slider.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="test/javascript" src="./bootstrap/js/bootstrap.js"></script>
<script type="test/javascript" src="./bootstrap/js/bootstrap-slider.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
    $('#slider-price').slider();
});
</script>
...
</head>
<body>
...
<div class="col-md-6">
   <span class="logo-font-sb-md">Price: £1<input id="slider-price" class="logo-font-el-sm" value="" data-slider-min="1" data-slider-max="1000" data-slider-step="1" data-slider-value="[250,450]"/> <b>€ 1000</b>
</div>

我对jQuery很陌生，所以我很可能犯了一个愚蠢的错误，但是会赞赏你正确的方向！

进一步澄清：

js文件或加载顺序顺序不是404错误。

Answer 1

尝试颠倒bootstrap和bootstrap滑块的顺序：

<script type="test/javascript" src="./bootstrap/js/bootstrap-slider.js"></script>
<script type="test/javascript" src="./bootstrap/js/bootstrap.js"></script>

到

<script type="test/javascript" src="./bootstrap/js/bootstrap.js"></script>
<script type="test/javascript" src="./bootstrap/js/bootstrap-slider.js"></script>

Answer 2

使用../而非./找到父文件夹。另外，撤消bootstrap.js和bootstrap-slider.js

的包含顺序

HTML：

<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap-slider.js"></script>

未捕获的TypeError：对象[object Object]在bootstrap = slider插件上没有方法'slider'

2 个答案:

HTML：