Question

我在同一页面上有3个jQuery滑块： -

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');
});

jQuery Multiple Slider动作

2 个答案: