Question

我为一个简单的jquery ui滑块编写了一个脚本。有两个滑块（稍后我会添加更多），当您更改它们的值时，它会显示在它们下方，然后更新总计。我正在努力解决的问题是如何制作它，因为当你滑动时，值会更新，而不是在你完成后更新。

感谢您的帮助！

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 $（ “滑块”）。滑块（{ 动画：“快”，最大值：25， min：0，步骤1，价值：10，选项： {} }）;

$(".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);
}

Answer 1

使用滑块的.slide()事件并尝试如下：

<强> jsFiddle example

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

jquery ui slider实时更新

1 个答案: