jQuery滑块相互控制

Question

我用jQuery创建了两个滑块，但每个滑块控制另一个，我该如何解决这个问题呢？

$(function() {  
$.extend($.ui.slider.defaults, { 
    handle:    ".slider-handle",
    min:        0,  
    max:        45,  
    start:      function(e,ui){ },  
    slide:      function(e,ui){  
                    var handleVal = $(".slider-bar").slider("value");    
                    $(".slider-handle").css('left', handleVal);  
                },  
    stop:       function(e,ui){  
                    if($(".slider-handle").position().left >= 38){  
                        $(".slider-handle").animate({left: 44}, 200 );  
                    }  
                    else {  
                        $(".slider-handle").animate({left: 0}, 200 );  
                    }  
                }),  

    $("#slider1").slider();  
    $("#slider2").slider();  
});

Answer 1

当您说var handleVal = $(".slider-bar").slider("value");时，页面上的所有滑块都会被选中，因为它们都具有相同的class = "slide-bar"属性。

而不是$(".slider-bar")，请使用$this。