Question

我有四个相同类的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代码来测试在mouseup事件之后检索滑块的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且没有值。

而是通过更改选择器将mouseup事件绑定到范围内的实际滑块：

$( ".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的值。

JQuery Mobile Slider在事件发生后返回空白值

1 个答案: