Question

我正在使用jQuery 1.8.2和jQuery UI 1.9.1。这是我第一次尝试使用滑块。

我正在尝试让四个滑块在同一页面上工作。第一个手柄显示正常，但我无法显示第二个手柄。

您可以在此处查看完整文件http://dev.iqcatalogs.com/avcat/myiq/test-16.cfm

我做错了什么？

<style>
#SliderWrapper {
    height: 200px;
    width: 200px;
}
.Slider {
    width: 150px;
    margin: 25px;
    float: left;
} 
.Label {
    width: 150px;
    float: left;
} 
</style>    

<div id="SliderWrapper">
<div class='Label'></div>
<div class="Slider" data-min='20' data-max='30'></div>
<div class='Label'></div>
<div class="Slider" data-min='30' data-max='40'></div>
<div class='Label'></div>
<div class="Slider" data-min='50' data-max='70'></div>
<div class='Label'></div>
<div class="Slider" data-min='80' data-max='100'></div>
</div>

<script>

$(".Slider").slider().each(function() {

    // SET VARS
    var $this = $(this),
        RangeLow = $this.data("min"),
        RangeHigh = $this.data("max"),
        ValueMin = RangeLow * .75, 
        ValueMax = RangeHigh * 1.25,
        Message = 'from' + ValueMin + ' to ' + ValueMax;

    $this.prev('div').text(Message);

    $this.slider({
        range: true,
        min: ValueMin,
        max: ValueMax,
        values: [RangeLow, RangeHigh],
        orientation: "horizontal"
    });

});

</script>

Answer 1

只需从.slider()功能中删除.each()。

即： $(".Slider").slider().each(function() {

变为 $(".Slider").each(function() {

编辑：here's a fiddle

您的初始代码无效的原因是您在slider()之前调用了each()。在您的类上调用slider()会为您的类添加一个默认滑块（单句柄），然后在滑块元素上进行迭代。这会导致您的each()块尝试调用滑块元素上的双手柄滑块，而不是最初定位的类。

如何使用范围在jQuery滑块中显示多个句柄？

1 个答案: