0

我正在尝试创建两个滑块，每个滑块都有自己的值，并让 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 的金额。

4

1 回答 1

0

添加 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);
}​
于 2012-06-06T20:04:03.133 回答