0

それぞれ独自の値を持つ 2 つのスライダーを作成し、jQuery に入力フィールドでこれら 2 つを互いに追加させようとしています。

私は 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;" />

入力フィールド「金額」に表示されているslider1とslider2の金額が欲しいです。

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 に答える