JavaScript roundsliderプラグインのデフォルト設定

roundslider pluginを使用しようとしています。JavaScript roundsliderプラグインのデフォルト設定

私は依存ファイルを含めるために、hereの指示に従い、HTMLを追加してプラグインを呼び出しました。

このすべてを次の単純な.htmlファイルに作成し、chromeを使用して開きました。

<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はページを開いたが、divに何も表示しなかった。どこで私は間違えましたか？

jsfiddle例はroundsliderによって提供されています。

出典

2016-07-25 kayduh

'$（「＃のslider1」）は、'定義されていません。 '$（function（）{}） 'ラッパーにスクリプトをラップします。 –

問題は、HTMLが読み込まれる前にスクリプトが呼び出されることです。その結果、$("#slider1")は未定義で、関数は何も呼び出されません。

次のいずれかの

$(function() {})

<div>

ラップ後<body>の終了または一部の場所に全体のJSコードをあなたのスクリプトを動かし

：

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

コードがwindow.load()関数でラップされ、HTMLが読み込まれるのを待つため、JSFiddleの例が機能するのは、その理由です。（この設定はJavaScript> Load Typeの設定で見ることができます）。

内部的には、これは彼らのスクリプト（あなたがJSFiddleでこれを確認するために開発者ツールを確認することができます）です：ときにスクリプトをロード

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

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

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

出典

2016-07-25 20:28:34

ああ、それは説明のためにあなたに感謝します。 2人のうちの後者が好ましい解決策であると推測していますか？ – kayduh

@kayduhそれがあなたを助けた場合は、受け入れたとマークして、あなたを助けたコミュニティを表示してください！ –

そして、はい、@ kayduh、それはより標準的です –

JavaScript roundsliderプラグインのデフォルト設定

答えて

関連する問題