1

我正在使用 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>
4

1 回答 1

2

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

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

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

编辑：这是一个小提琴

您的初始代码不起作用的原因是因为您之前调用slider()过each(). 调用slider()您的类会为您的类添加一个默认滑块（单手柄），然后迭代滑块元素。这会导致您的each()块尝试在滑块元素上调用双手柄滑块，而不是您最初的目标类。

于 2012-11-05T16:27:10.357 回答