JQuery Slider 事件处理程序回调答案

【问题标题】：JQuery Slider Event handler callbackJQuery Slider 事件处理程序回调
【发布时间】：2012-07-16 23:49:24
【问题描述】：

我正在研究 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" ));

被slider方法中的slide参数严重搞糊涂了：

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

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

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

这些行不是在做同样的事情吗？任何和所有输入将不胜感激。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-slider

【解决方案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案例）。

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

【讨论】：