jQuery fehlgeschlagen beim Aufruf "Slider" -Funktion

Ich möchte einen Schieberegler in einer HTML-Datei mit this bootstrap api erstellen, aber es zeigt weiterhin `jquery-3.1.1.slim.min.js: 2 jQuery.Der Ausnahmefehler: $ (. . ..) Slider ist keine Funktion Typeerror:jQuery fehlgeschlagen beim Aufruf "Slider" -Funktion

$(...).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)`

ich heruntergeladen beide js und CSS-Dateien von here.

dies ist mein Code:

<!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>

Ich habe auch versucht CDN zu verwenden, um die lokalen js und CSS zu ersetzen, aber es ändert sich nichts

Quelle

2017-06-18 Deidara

'slider' nicht' Slider' –

Ich habe versucht, beide aber das Problem besteht nach wie vor – Deidara

ich eine naswer geschrieben .. Bitte lesen Sie sorgfältig mit Hinweis –

Wie ein slider documentation - Sie haben zwei Möglichkeiten, es zu verwenden

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

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

Arbeitsbeispiel mit .slider

<!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>

Arbeitsbeispiel mit var myslider = new Slider('#ex6')

<!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>

Note: On my examples I used slider CDN so if your code not working with your css , js paths you can use CDN instead or check your paths

Quelle

2017-06-18 23:47:17

Hallo, wenn ich meinen Code im Browser wie das, was Sie getan haben, testen, funktioniert es gut, aber wenn ich den gleichen Code in eine Anwendung auf Basis von [Elektron] kopieren (https: //electron.atom .io), kann die Slider-Funktion nicht mehr erkannt werden, was wirklich seltsam ist. – Deidara

OK Problem gelöst Vielen Dank für das Schreiben dieser – Deidara

@Deidara froh zu hören, dass .. Einen schönen Tag haben :-) –

Sie haben die Funktion, bevor das Skript lädt Callig.

Umwickeln Sie Ihren Code.

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

}) 

</script>

Quelle

2017-06-18 22:58:42

hallo Das Problem besteht immer noch. Ich habe die Fragebeschreibung aktualisiert. – Deidara

Sie sollten verwenden: $ ("# ex6").Schieberegler({}); Wenn das nicht funktioniert, versuchen Sie es in Ihrer Browserkonsole. Wenn während des Aufrufs über die Konsole der Fehler angezeigt wird, liegt ein Problem mit der zu importierenden Datei vor. –

schreiben Schieber statt Slider

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

und stellen Sie sicher, dass die bootstrap-slider.js Datei in assets/js/ Ordner abgelegt wird

Quelle

2017-06-18 23:13:52

Ich habe beides versucht. Das Problem besteht immer noch – Deidara

Okay. Ich habe meine Antwort auch aktualisiert –

Okay, ich entschuldige mich für meine Frage eindeutig nicht schreiben, so ist das Problem nicht aus der HTML-Datei, sondern aus dem Rahmen, den ich arbeite.

Da ich electron verwendet, wenn Sie nur den HTML-Code laden, kann die Anwendung die JS-Dateien in der HTML nicht erkennen, es sei denn, Sie fügen den folgenden Code vor und nach Ihren Skripten.

<!-- 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>

Hier ist die Quelle der Lösung auf dieser issue

Quelle

2017-06-19 00:47:32 Deidara

jQuery fehlgeschlagen beim Aufruf "Slider" -Funktion

Antwort

Verwandte Themen