javascript - jQueryスライダーのデフォルト値を設定し、必要に応じてオーバーライドします

Question

背景：現在、ウェブサイトの.jsファイル内にjQueryスライダーが機能しています。

$( "#slider-range-min" ).slider({
      range: "min",
      value: 100,
      min: 1,
      max: 100,
    });

「値」を100から他の値にオーバーライドできるようにする必要がある場合があります。だから私はこれを試しました：

$( "#slider-range-min" ).slider({
      range: "min",
      value: _Slider_Value,
      min: 1,
      max: 100,
    });

私のhtmlページでこれを定義しました

<script type="text/javascript">  
    var _Slider_Value = 50;
</script>

これも機能します！それを除いて、他のすべてのページで、「_Slider_Valueが定義されていません」というJavaScriptエラーが発生します。回避できるのであれば、すべてのページに値をコピーして貼り付ける必要はありません...それを行うための「良い」方法ではないでしょうか。

質問：これを行うためのより良い方法はありますか？スライダーのデフォルト値を設定できますが、必要に応じてオーバーライドすることがありますか？

編集：別の言い方をすれば、HTMLページで特に指定しない限り、スライダーをデフォルトで「100」にするにはどうすればよいですか？

score 2 · Accepted Answer

ここでコンテナ内spanのスライダーがあるHTMLにaを配置します（）divid="slider-range-min"

<span class="min">100</span>

スライダー機能でこの値を読み取ります

$( "#slider-range-min" ).slider({
      range: "min",
      value: $(this).find('.min').text();,
      min: 1,
      max: 100,
    });

ページ上で値を更新する必要がある場合は常に、必要に応じてスパン値を動的に変更します。それ以外の場合は、デフォルト値を使用します。ここに100。

score 2 · Accepted Answer

2

すべてのページに含めるjsファイルでそれを定義します

于 2012-05-16T09:16:15.380 に答える

score 2 · Accepted Answer

変数を最小化しようとしている場合は、いつでも確認できます

if (_Slider_Value != undefined) {
    //your code here
}

また

(_Slider_Value != undefined) ? _Slider_Value : 100;

したがって、最終的なコードは次のようになります。

$( "#slider-range-min" ).slider({
  range: "min",
  value: (_Slider_Value != undefined) ? _Slider_Value : 100,
  min: 1,
  max: 100,
});

_Slider_Valueに値がない場合、デフォルトで100になります

score 1 · Accepted Answer

この文字列でスライダーのオプションを上書きできます。$（'＃slider-range-min'）。slider（{value：50}）;

score 1 · Accepted Answer

変数をグローバルに宣言して、Webページのどこからでもアクセスできるようにします。これがチュートリアルリンクです。

グローバルにするためにvarキーワードなしで変数を宣言してみてください

<script type="text/javascript">  
    _Slider_Value = 50;
</script>

これが機能しない場合は、変数をウィンドウオブジェクトにバインドしてみてください

var myValue;
function setValue()
{
    myValue = "test";
}

function getValue()
{
    alert(window.myValue); // yup, it's "test"
}

ここに私が例を挙げた完全な説明があります。

それが機能することを願っています（実際には試していません）

5 に答える 5