Question

我想在this bootstrap api的html文件中创建一个滑块，但它一直显示`jquery-3.1.1.slim.min.js：2 jQuery.Deferred异常：$（...）。 Slider不是函数TypeError：

 $(...).Slider is not a function
    at HTMLDocument.<anonymous> (file:///Users/apple/Desktop/pjt/index.html:35:18)
    at j (https://code.jquery.com/jquery-3.1.1.slim.min.js:2:30164)
    at k (https://code.jquery.com/jquery-3.1.1.slim.min.js:2:30478) undefined
r.Deferred.exceptionHook @ jquery-3.1.1.slim.min.js:2
k @ jquery-3.1.1.slim.min.js:2
jquery-3.1.1.slim.min.js:2 Uncaught TypeError: $(...).Slider is not a function
    at HTMLDocument.<anonymous> (index.html:35)
    at j (jquery-3.1.1.slim.min.js:2)
    at k (jquery-3.1.1.slim.min.js:2)`

我从here下载了js和css文件。

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/css/bootstrap-slider.css">
    <link rel="stylesheet" href="assets/css/style.css">

  </head>

  <body>
      <header class="nav-header">
    </header>
    <div class="container">
      <div class="row">
        <div class="left_section">
          <input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
        </div>
        <div class="middle_section">
        </div>
        <div class="right_section">
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="assets/js/bootstrap-slider.js"></script>
   <script>
   $(document).ready(function() {
       $("#ex6").Slider(); // I also tried .slider()
       $("#ex6").on("slide", function(slideEvt) {
           $("#ex6SliderVal").text(slideEvt.value);
       });

   })

   </script>
      </body>


</html>

我还尝试使用CDN替换本地js和css，但没有任何改变

Answer 1

像slider documentation一样 - 您有2种方法可以使用它

var mySlider = new Slider('#ex6');

OR

$('#ex6').slider();

使用.slider

的工作示例

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.css">
    <link rel="stylesheet" href="assets/css/style.css">

  </head>

  <body>
      <header class="nav-header">
    </header>
    <div class="container">
      <div class="row">
        <div class="left_section">
          <input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
        </div>
        <div class="middle_section">
        </div>
        <div class="right_section">
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.js"></script>
   <script>
   $(document).ready(function() {
       $('#ex6').slider();
       $("#ex6").on("slide", function(slideEvt) {
           $("#ex6SliderVal").text(slideEvt.value);
       });

   })

   </script>
      </body>


</html>

＆＃13;

使用var myslider = new Slider('#ex6')

的工作示例

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.css">
    <link rel="stylesheet" href="assets/css/style.css">

  </head>

  <body>
      <header class="nav-header">
    </header>
    <div class="container">
      <div class="row">
        <div class="left_section">
          <input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
        </div>
        <div class="middle_section">
        </div>
        <div class="right_section">
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.js"></script>
   <script>
   $(document).ready(function() {
       var mySlider = new Slider('#ex6');
       $("#ex6").on("slide", function(slideEvt) {
           $("#ex6SliderVal").text(slideEvt.value);
       });

   })

   </script>
      </body>


</html>

＆＃13;

注意：在我的示例中，我使用了滑块CDN，所以如果您的代码不使用你的css，js路径，你可以使用CDN或检查你的路径

Answer 2

好吧，我为没有清楚地写出我的问题而道歉，所以问题不是来自html文件，而是来自我正在处理的框架。

由于我使用electron，如果您只是加载html代码，除非您在脚本之前和之后添加以下代码，否则应用程序无法识别html中的js文件。

<!-- Insert this line above script imports  -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

<!-- normal script imports etc  -->
<script src="scripts/jquery.min.js"></script>    
<script src="scripts/vendor.js"></script>    

<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>

以下是此issue

的解决方案的来源

Answer 3

在脚本加载之前，你是callig函数。

包裹你的代码。

<script>
$(document).ready(function() {
    $("#ex6").Slider();
    $("#ex6").on("slide", function(slideEvt) {
        $("#ex6SliderVal").text(slideEvt.value);
    });

})

</script>

Answer 4

写入滑块而不是滑块

$("#ex6").slider();

确保bootstrap-slider.js文件放在assets/js/文件夹

中

jQuery在调用“Slider”函数时失败了

4 个答案: