0

次のようなjQuery UI Sliderがあるとします。

$(".mySlider").slider({
    range: "min", 
    min: 0, 
    max: 10, 
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

スライダーの横に動的入力テキストがあり、スライダーの値を次のように表示するとします。

<input id="slider-value" type="text" value="7" style="text-align: center;">

したがって、私のスライダーの完全なコードは次のとおりです。

<p>
<div id="slider-value" class="mySlider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<input id="slider-value" type="text" value="7" style="text-align: center;">
</p>

ご覧のとおり、最初にページが読み込まれると、スライダーの値は 7 になります。また、スライダーの値を示す入力テキストの ID は、スライダーの div 自体と同じです。ページの読み込み時にスライダーのハンドルにその値が表示されるようにします。スライダーの value 属性を 7 に設定すると、次のようになります。

$(".mySlider").slider({
    range: "min", 
    min: 0, 
    max: 10, 
    value: 7, // value of the slider handle
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

これは問題なく動作しますが、スライダーの値がデータベースから取得され、変更される可能性があるため (1、8、4、6 など)、これが最適な方法ではないことは明らかです。

今、次のようなことをしようとすると:

$(".mySlider").slider({
    range: "min", 
    min: 0, 
    max: 10, 
    value: $(this).closest("p").find("input[id=" + $(this).attr("id") + "]").attr("value"), // setting the value of the slider handle dynamically
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

何らかの理由で、これは機能しません。ハンドルは値を示しません。$().slider({}) 内で $(this) を使用できないためですか?

これが機能しない理由を誰かに教えてください

ありがとうございました

4

3 に答える 3

2

thisここは何ですか？config を作成し、それを引数としてスライダー プラグインに送信しているだけなので、それが指すとは思わないでください.mySlider。スライダーはまだ初期化されていません。これを試して。

var $mySlider = $(".mySlider");
$mySlider.slider({
    range: "min", 
    min: 0, 
    max: 10, 
    value: $mySlider.next('input').val(),
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

側面として、ID はページで一意である必要があります。を使用するval()代わりに、メソッドを使用して入力要素から値を取得できますattr("value")。

あなたの編集に基づいて私の答えを編集しました（マークアップを追加しました）。メソッドを使用next()して、 の直接の入力 (兄弟) を検索し.mySlider、値を取得しました。

更新:複数のスライダーの場合、このコードを使用します

$(".mySlider").each(function(){
    var $this = $(this);
    $this.slider({
        range: "min", 
        min: 0, 
        max: 10, 
        value: $this.next('input').val(),
        slide: function(event, ui){
            // do stuff here on slide...
        }
    });
});
于 2012-02-15T15:30:15.010 に答える
0

@ShankarSangoliの答えはそれを修正する方法に対処していますが、なぜあなたが尋ねたと思います.

thisなぜスライダーを参照しないのかという質問に答えるには、その関数呼び出しをどのように構築しているかを見てください。

$(".mySlider").slider({
    range: "min", 
    min: 0, 
    max: 10, 
    value: $(this).closest("p").find("input[id=" + $(this).attr("id") + "]").attr("value"), // setting the value of the slider handle dynamically
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

ただし、名前と詳細をより単純なものに置き換えましょう。

object.method({
    value: this.function().otherFunction()...;
});

これは

var params = {
    value: this.function().otherFunction()...;
};
object.method(params);

既に指摘したように、thisはスライダー オブジェクトを参照しないため、最初にスライダーへの参照を作成する必要があります。 thisは、最新のエンクロージング スコープを参照します。この場合は、.sliderメソッド呼び出しのパラメーターを渡すために作成している匿名オブジェクト {} です。

それが役立つことを願っています。

于 2012-02-15T15:44:30.987 に答える
0

@ShankarSangoli の投稿に基づく:

var $mySlider = $(".mySlider");
$mySlider.each(function() {
    var $slider = $(this);
    $slider.slider({
        range: "min", 
        min: 0, 
        max: 10, 
        value: $slider.next('input').val(),
        slide: function(event, ui){
            // do stuff here on slide...
        }
    });
});

それぞれを取得し.mySliderてプラグインを追加し、それを保存して$sliderその値を取得します。

于 2012-02-15T15:48:38.863 に答える