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的值。