JavaScript Roundslider Plugin Standardeinstellungen

Ich versuche, die roundslider plugin zu verwenden.JavaScript Roundslider Plugin Standardeinstellungen

Ich folgte den Anweisungen gefunden here, um die Abhängigkeitsdateien aufzunehmen, fügen Sie den HTML-Code hinzu und rufen Sie das Plugin auf.

Ich habe das alles in der folgenden einfachen .html-Datei erstellt und mit chrome geöffnet.

<html> 
    <head> 
     <script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script> 
     <link href="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css" rel="stylesheet" /> 
     <script src="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js"></script> 
     <script type="text/javascript"> 
      $("#slider1").roundSlider({ 
       sliderType: "default", 
       value: 40 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="slider1" class="rslider"></div> 
    </body> 
</html>

Chrome öffnete die Seite, zeigte aber nichts im div. Was habe ich falsch gemacht?

jsfiddle Beispiel von Roundslider zur Verfügung gestellt.

Quelle

2016-07-25 kayduh

'$ ("# slider1")' nicht, wenn die Skriptlasten definiert. Wickeln Sie das Skript in einen '$ (function() {})' Wrapper. –

Das Problem ist, dass das Skript aufgerufen wird, bevor der HTML-Code geladen wird. Als Ergebnis ist $("#slider1") undefiniert und die Funktion wird auf nichts aufgerufen.

Entweder:

bis zum Ende der <body> oder ein Ort nach dem <div>

Wrap dem gesamten JS-Code in einem $(function() {}) Wrapper, bis Seite Last wartet, wie so Bewegen Sie Skript:

$(function() { 
    $("#slider1").roundSlider({ 
     sliderType: "default", 
     value: 40 
    }); 
});

Der Grund für das JSFiddle-Beispiel liegt darin, dass der Code in eine window.load()-Funktion eingebettet ist, die darauf wartet, dass der HTML-Code geladen wird. (Sie können diese Einstellung unter der Einstellung JavaScript> Load Type sehen).

Intern das ist ihr Skript (können Sie die Developer Tools überprüfen Sie dies im JSFiddle sehen):

//<![CDATA[ 
$(window).load(function(){ 
$("#slider1").roundSlider({ 
    sliderType: "default", 
    value: 40 
}); 

$("#slider2").roundSlider({ 
    sliderType: "min-range", 
    value: 40 
}); 

$("#slider3").roundSlider({ 
    sliderType: "range", 
    value: "10,40" 
}); 
});//]]>

Quelle

2016-07-25 20:28:34

Ah, das macht Sinn, danke für die Klarstellung. Ich rate, dass die letztere der beiden die bevorzugte Lösung wäre? – kayduh

@kayduh Wenn es dir geholfen hat, markiere es als akzeptiert, um der Community zu zeigen, dass es dir geholfen hat! –

Und ja, @ kayduh, es ist mehr Standard –

JavaScript Roundslider Plugin Standardeinstellungen

Antwort

Verwandte Themen