0

シンプルな jquery ui スライダーのスクリプトを作成しました。2 つのスライダーがあり (後でさらに追加します)、それらの値を変更すると、それらの下に表示され、合計が更新されます。私が理解するのに苦労しているのは、終了後に更新されるのではなく、スライドしているときに値が更新されるようにする方法です。

助けてくれてありがとう！

デモのフィドル http://jsfiddle.net/tMmDy/

HTML 

<div class="slider_1 slider"></div>  
<p id="slider_1-value"></p>

<div class="slider_2 slider"></div>  
<p id="slider_2-value"></p>

CSS

.slider {
    width:100px;
    height:5px;
    background:blue;
}

JS $(".slider").slider({ animate: "fast", max: 25, min: 0, step: 1, value: 10, option: {} });

$(".slider_1").on("slidechange", function (event, ui) {
    total_1 = $(".slider_1").slider("value");
    $("#slider_1-value").html(total_1);
    total_value_update();
});

$(".slider_2").on("slidechange", function (event, ui) {
    total_2 = $(".slider_2").slider("value");
    $("#slider_2-value").html(total_2);
    total_value_update();
});

function total_value_update() {
    total_values = total_1 + total_2;
    $("#total_value").html(total_values);
}
4

1 に答える 1

3

スライダーの.slide()イベントを使用して、次のように試してください。

jsFiddle の例

var total_1, total_2;
$(".slider").slider({
    animate: "fast",
    max: 25,
    min: 0,
    value: 10,
    slide: function (event, ui) {
        total_1 = $(".slider_1").slider("value");
        total_2 = $(".slider_2").slider("value");
        $("#slider_1-value").html(total_1);
        $("#slider_2-value").html(total_2);
        total_value_update();
    },
    change: function (event, ui) {
        total_1 = $(".slider_1").slider("value");
        total_2 = $(".slider_2").slider("value");
        $("#slider_1-value").html(total_1);
        $("#slider_2-value").html(total_2);
        total_value_update();
    }
});

function total_value_update() {
    total_values = total_1 + total_2;
    $("#total_value").html(total_values);
}
于 2013-08-09T14:52:05.637 に答える