JQuery Slider事件處理函數回調

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> 

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

從我可以告訴，這是陳調整滑塊上方的值以匹配滑塊的值。但是，如果是這種情況，那麼跟隨滑塊方法的行會做什麼：

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

Arent這些行做同樣的事情？任何和所有的輸入將不勝感激。

Answer 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（嘗試刪除該行以查看我的意思）。