JQuery的移動滑動條事件

Question

之後返回空白值I具有相同的類mySliderClass四個相同的滑塊，但具有不同的id屬性：S1，S2，S3和S4。我建立每個滑塊與此HTML代碼：

<span class="mySliderClass" data-role="fieldcontain"> % 
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"/> 
</span> 

然後我設置的$（ 「mySliderClass。」）的每個元素的id屬性S1，S2，S3和S4。

我想這段JavaScript代碼來測試鼠標鬆開事件之後檢索滑塊的ID和值：

$(".mySliderClass").bind("mouseup", function(event, ui) { 
    var sliderID = $(this).attr('id'); 
    console.log(sliderID); 
    var sliderValue = $(this).val(); 
    console.log(sliderValue); 
}); 

我的控制檯指示該滑塊鬆開把手時，任何給定的滑塊的正確ID返回。但是，$（this）.val（）總是返回一個空字符串。此外，似乎根本沒有檢測到某些滑塊事件，例如更改。我一直在看幾個小時的文檔，但我仍然無法找出問題所在。

Answer 1

這是因爲你被綁定到span。跨度定義爲沒有id和沒有值。

相反，通過改變選擇綁定鼠標鬆開事件跨度內的實際滑塊：

$(".mySliderClass input[type='range']").bind("mouseup", function(event, ui) { 
    var sliderID = $(this).attr('id'); 
    console.log(sliderID); 
    var sliderValue = $(this).val(); 
    console.log(sliderValue); 
}); 

此外，與您的代碼，我不知道爲什麼會返回的ID（它不應該是）。我在Chrome上進行測試，並獲得id爲undefined的值。