1

jQuery 1.8.2 と jQuery UI 1.9.1 を使用しています。スライダーを使うのは初めてです。

同じページで 4 つのスライダーを動作させようとしています。最初のハンドルは問題なく表示されますが、2 番目のハンドルが表示されません。

ここで完全なファイルを見ることができます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()です。

すなわち: $(".Slider").slider().each(function() {

なる $(".Slider").each(function() {

編集：ここにフィドルがあります

最初のコードが機能しなかった理由は、slider()以前にを呼び出していたためですeach()。クラスを呼び出すslider()と、デフォルトのスライダー (単一ハンドル) がクラスに追加され、スライダー要素が反復処理されます。これにより、each()ブロックは、最初に対象としたクラスではなく、スライダー要素でダブルハンドル スライダーを呼び出そうとします。

于 2012-11-05T16:27:10.357 に答える