Question

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

我希望输入字段“amount”中显示来自slider1和slider2的金额。

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

jQuery UI滑块 - 添加

1 个答案: