jQuery UI 滑块 - 添加答案

【问题标题】：jQuery UI slider - AdditionsjQuery UI 滑块 - 添加
【发布时间】：2012-06-06 18:49:50
【问题描述】：

我正在尝试创建两个滑块，每个滑块都有自己的值，并让 jQuery 在输入字段中将这两个滑块相互添加。

当谈到 jQuery 时，我是一个完全的新手，我只是通过遵循 http://jqueryui.com/demos/slider/ 上的代码才能够走到这一步

$(function() {
    $( "#slider1" ).slider({
        value: 500,
        min: 500,
        max: 4000,
        step: 500,
        slide: function( event, ui ) {
            $( "#amount1" ).val( ui.value + " kr." );
        }
    });
    $( "#slider2" ).slider({
        value: 2700,
        min: 2700,
        max: 27000,
        step: 2700,
        slide: function( event, ui ) {
            $( "#amount2" ).val( ui.value + " kr." );
        }
    });
    $( '#amount' ).val(( '#amount1' ) + ( '#amount2' ));
});

HTML：

    <label for="amount1">Hours (500 kr. increments):</label>
    <input type="text" id="amount1" style="border:0; color:#f6931f; font-weight:bold;" />

<div id="slider1"></div>

    <label for="amount2">Camera (500 kr. increments):</label>
    <input type="text" id="amount2" style="border:0; color:#f6931f; font-weight:bold;" />

<div id="slider2"></div>

    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />

我希望在输入字段“金额”中显示滑块 1 和滑块 2 的金额。

【问题讨论】：

澄清一下，这是 jQuery UI，而不仅仅是 jQuery。它们是不同的。

标签： jquery jquery-ui input slider addition

【解决方案1】：

添加 updateTotal 函数并在滑块的幻灯片事件处理程序中调用它：

$("#slider1").slider({
    value: 500,
    min: 500,
    max: 4000,
    step: 500,
    slide: function(event, ui) {
        $("#amount1").val(ui.value + " kr.");
        updateTotal();
    }
});
$("#slider2").slider({
    value: 2700,
    min: 2700,
    max: 27000,
    step: 2700,
    slide: function(event, ui) {
        $("#amount2").val(ui.value + " kr.");
        updateTotal();
    }
});

function updateTotal() {
    var total = $("#slider1").slider("value") + $("#slider2").slider("value");
    $('#amount').val(total);
}

【讨论】：