jQuery 多滑块动作答案

【问题标题】：jQuery Multiple Slider actionjQuery 多滑块动作
【发布时间】：2016-01-20 14:32:52
【问题描述】：

我在同一页面上有 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');
    }
});

但这不起作用。

【问题讨论】：

标签： jquery jquery-ui jquery-slider

【解决方案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

【讨论】：

【解决方案2】：

API 给出 event:-

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

所以如果所有滑块都有 slider 类，那么在初始化它们之后绑定它：-

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

【讨论】：