2

私は最初のjqueryを処理していて、jqueryuiを扱う章にいます。具体的には、この例では、スライダーの上のスライダーの値を表示するjqueryスライダーをウォークスルーしています。スクリーンショット：http：//i.imgur.com/ahRRy.png？ 1しかし、私はコードを理解するのに非常に苦労しています：

HTML：

<h3>Distance from Creature (in ft.):</h3>
                <input type="text" id="distance" class="just_display" name="creature_distance" readonly="readonly"/>
                <div id="slide_dist"></div> 

<h3>Creature Weight (in lbs.):</h3>
                <input  type="text" id="weight" class="just_display" name="creature_weight"   readonly="readonly"/>
                <div id="slide_weight"></div>

<h3>Creature Height (in ft.):</h3>
                <input  type="text" id="height" class="just_display" name="creature_height" readonly="readonly"/>
                <div id="slide_height"></div>

JQUERY：

//3a. slide_dist
        $( "#slide_dist" ).slider({
            value:0,
            min: 0,
            max: 500,
            step: 10,
            slide: function( event, ui ) {
                $( "#distance" ).val( ui.value);
            }
        });
    $( "#distance" ).val( $( "#slide_dist" ).slider( "value" ));



        //3b. slide_weight

        $( "#slide_weight" ).slider({
            value:0,
            min: 0,
            max: 5000,
            step: 5,
            slide: function( event, ui ) {
                $( "#weight" ).val( ui.value);
            }
        });

        $( "#weight" ).val( $( "#slide_weight" ).slider( "value" ));

        //3c.  slide_height
        $( "#slide_height" ).slider({
            value:0,
            min: 0,
            max: 20,
            step: 1,
            slide: function( event, ui ) {
                $( "#height" ).val( ui.value);
            }
        });

        $( "#height" ).val( $( "#slide_height" ).slider( "value" ));

スライダーメソッドのslideパラメーターにひどく混乱しています。

slide: function( event, ui ) {
        $( "#height" ).val( ui.value);
   }

私の知る限り、これはスライダーの上の値を変更して、スライダーの値に一致させます。ただし、その場合、sliderメソッドに続く行は次のようになります。

$( "#height" ).val( $( "#slide_height" ).slider( "value" ));

これらの行は同じことをしていませんか？ありとあらゆる入力をいただければ幸いです。

4

1 に答える 1

1

この行：

slide: function( event, ui ) {
    $( "#height" ).val( ui.value);
}

jQueryUIで定義されている「スライド」イベントのイベントハンドラーを定義しています。スライド中にマウスを動かすたびに、イベントハンドラー#heightがスライダーの更新された値で更新されます。

この行（あなたが与えた文脈で）：

$( "#height" ).val( $( "#slide_height" ).slider( "value" ));

#heightの値を最初に設定するだけです0（スライダーの初期値は0で、で初期化された各スライダーのオプションを確認できますvalue）。0value:0

2つの違いは、最初はマウスがスライダー上を移動するたびに実行され、2番目はスライダーが初期化された直後に1回実行され、#height要素（0この場合）の初期値を提供することです。

別の見方をすれば、2番目のスニペットが存在しない場合、#height要素は0最初は表示されません（その行を削除して、意味を確認してください）。

于 2012-07-16T23:52:41.043 に答える