2

我正在通过 head first jquery 工作，并且我正在处理 jquery ui 的一章。具体来说，该示例正在浏览一个 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>

查询：

//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: function( event, ui ) {
        $( "#height" ).val( ui.value);
   }

据我所知，这是更改滑块上方的值以匹配滑块的值。但是，如果是这种情况，那么滑块方法后面的行会做什么：

$( "#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每个滑块中的选项初始化为0）value:0。

两者之间的区别在于，第一个在每次鼠标在滑块上移动时运行，第二个在滑块初始化后立即执行一次，为#height元素提供初始值（0在本例中）。

另一种看待它的方式是，如果第二个片段不存在，则该#height元素最初不会显示0（尝试删除该行以了解我的意思）。

于 2012-07-16T23:52:41.043 回答