Question

我正在使用此jquery slider，此滑块有3个实例，如何同步它们？

JS：

$( ".slider" ).slider();

HTML：

<div class="slider"></div>
...
<div class="slider"></div>

Answer 1

为每个分配不同的ID：

<div class="slider" id="slider1"></div>
<div class="slider" id="slider2"></div>
<div class="slider" id="slider3"></div>

然后初始化滑块：

$("#slider1").slider({
   slide: function(event, ui) { 
      $("#slider2").slider("value", ui.value );
      $("#slider3").slider("value", ui.value );
   }
});

$("#slider2").slider({
   slide: function(event, ui) { 
      $("#slider1").slider("value", ui.value );
      $("#slider3").slider("value", ui.value );
   }
});

$("#slider3").slider({
   slide: function(event, ui) { 
      $("#slider1").slider("value", ui.value );
      $("#slider2").slider("value", ui.value );
   }
});

Answer 2

您可以使用.each（）：

同步多个共享同一个类的滑块

$('.slider.sync').slider({
    min:0,
    max:100,
    slide: function(event,ui){
        $('.slider.sync').each(function(){
            $(this).slider( 'value', ui.value );    
            $(this).siblings('span.value').text( ui.value ); // print value to span.value
        });
    }
});

如果您正在使用范围选项，它也可以使用，只需确保使用＆＃39;值＆＃39;方法而不是＆＃39;值＆＃39;：

$('.slider.sync').slider({
    range:true,
    min:0,
    max:100,
    values:[0,100],
    slide: function(event,ui){
        $('.slider.sync').each(function(){
            $(this).slider( 'values', [ ui.values[0],ui.values[1] ] );
            $(this).siblings('span.min').text( ui.values[0] ); // print min value to span.min
            $(this).siblings('span.max').text( ui.values[1] ); // print max value to span.max
        });
    }
});

如何同步几个jQuery滑块？

2 个答案: