Question

我正在通过头部第一个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>

THE 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);
   }

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

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

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

Answer 1

这一行：

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

为jQueryUI定义的“slide”事件定义事件处理程序。在幻灯片中，每次鼠标移动时，事件处理程序都会使用滑块的更新值更新#height。

这一行（在你给出的上下文中）：

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

最初只是将#height的值设置为0（滑块的初始值为0，您可以在每个初始化为{{1}的滑块中看到value选项与0）。

两者之间的区别在于，每次鼠标在滑块上移动时第一次运行，第二次在初始化滑块后立即执行一次，为value:0元素提供初始值（{{1在这种情况下）。

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

JQuery Slider事件处理程序回调

1 个答案: