jQuery的多滑块动作

Question

我已在同一页上的jQuery 3个滑块： -

jQuery('.slider-deposit').slider({ 
    range: "max", 
    min: 3800, 
    max: 30000, 
    value: 3848, 
    step: 500, 
    slide: function(event, ui) {    
     jQuery(".calc-deposit").html('£'+ui.value); 
}); 

jQuery('.slider-loan').slider({ 
    range: "max", 
    min: 15400, 
    max: 120000, 
    value: 15393, 
    step: 2000, 
    slide: function(event, ui) { 
     jQuery(".calc-loan").html('£'+ui.value); 
    } 
}); 

jQuery('.slider-mortgage').slider({ 
    range: "max", 
    min: 57000, 
    max: 450000, 
    value: 57724, 
    step: 7500, 
    slide: function(event, ui) { 
     jQuery(".calc-mortgage").html('£'+ui.value); 
    } 
}); 

在变化上的任何我想要更新页面上的值滑块，如何实现这一目标？

我曾尝试： -

jQuery('.slider').slider({ 
    slide: function(event, ui) {    
     alert('test'); 
    } 
}); 

但是，这是行不通的。

Answer 1

你可以干你的代码在您实例化滑块的HTML元素上使用data属性。这将允许您在所有三个事件的slide事件上运行相同的代码。试试这个：

<div class="slider" data-min="3800" data-max="30000" data-value="3848" data-step="500" data-target=".calc-deposit"></div> 
<div class="slider" data-min="15400" data-max="120000" data-value="15393" data-step="2000" data-target=".calc-loan"></div> 
<div class="slider" data-min="57000" data-max="450000" data-value="57724" data-step="7500" data-target=".calc-mortgage"></div> 

$('.slider').each(function() { 
    var $el = $(this); 
    $el.slider({ 
     range: "max", 
     min: $el.data('min'), 
     max: $el.data('max'), 
     value: $el.data('value'), 
     step: $el.data('step'), 
     slide: function(event, ui) { 
      $($el.data('target')).html('£' + ui.value); 

      // place code here which will execute when *any* slider moves 
     } 
    }); 
}); 

Example fiddle

Answer 2

的API给出了一个event： -

$(".selector").on("slide", function(event, ui) { }); 

因此，如果所有滑块有类slider，然后绑定你初始化它们之后： -

jQuery('.slider').on("slide", function(event, ui){   
    alert('test'); 
});