Question

我有这段代码：MyFiddle

HMTL

<p>Money: <span id="amountDisp">500</span><div id="amount_slider"></div></p><p>Time: <span id="timeDisp">7</span><div id="time_slider"></div></p><p>Calculated <span id="result" >545</span></p>

JQuery的：

$(document).ready(function () {
    $("#amount_slider").slider({
        orientation: "horizontal",
        range: false,
        min: 500,
        max: 4999,
        value: 500,
        step: 1,
                animate: true,
        change: function (event, ui) {
            $("#amount_field").val(ui.value);
            $("#amount").text(ui.value);
            calculate();
        },
                slide: function (event, ui) {
            $("#amount_field").val(ui.value);
            $("#amountDisp").text(ui.value);
        }
    });
    $("#time_slider").slider({
        orientation: "horizontal",
        range: false,
        min: 7,
        max: 28,
                step: 7,
        value: 7,
                animate: true,
        change: function (event, ui) {
            $("#time_field").val(ui.value);
            $("#time").text(ui.value);
            calculate();
        },
                slide: function (event, ui) {
            $("#time_field").val(ui.value);
            $("#timeDisp").text(ui.value);
        }
    });
    function calculate() {
        var amount = parseInt($("#amount_slider").slider("value"));
        var time = parseInt($("#time_slider").slider("value"));
                var coeficient = 0;
                switch(time){
                       case 7: coeficient = 0.09;break;
                       case 14: coeficient = 0.15;break;
                       case 21: coeficient = 0.19;break;
                       case 28: coeficient = 0.25;break;
                       }
        var rate = amount + (amount * coeficient);
        $("#result").text(rate.toFixed(2));
        $("#result_field").val(rate.toFixed(2));
    }
});

1）它基本上做我想要的。但是，我想让“计算”字段（或输出）更加平滑。所以当我滑动时它会改变它的价值。就像滑块上面的其他两个输出一样。

2）另一个问题是，如何做到这一点。我的意思是输入将由用户在典型的表单输入中输入。它也将计算。

Answer 1

您需要在slide回调函数中对逻辑进行编码以进行实时更新，而不是change。

关于你的第二个问题，用这个新陈述设置一个更好的jsfiddle。我知道，花费你几分钟但是花更多的时间比花时间与其他成员一样......

Answer 2

slide: function (event, ui) {
        $("#amount_field").val(ui.value);
        $("#amountDisp").text(ui.value);
                calculate();
    }

您需要在幻灯片事件中计算。

Fiddle

Answer 3

你有这个：

 change: function (event, ui) {
            $("#time_field").val(ui.value);
            $("#time").text(ui.value);
            calculate();
        },
 slide: function (event, ui) {
            $("#time_field").val(ui.value);
            $("#timeDisp").text(ui.value);
        }

你需要这个：

 change: function (event, ui) {
            $("#time_field").val(ui.value);
            $("#time").text(ui.value);
        },
 slide: function (event, ui) {
            $("#time_field").val(ui.value);
            $("#timeDisp").text(ui.value);
            calculate(); //move calculate on SLIDE event, which is triggered on every mousemove
        }

为BOTH滑块做。

Answer 4

如果您希望滑块值实时更新，请使用输入功能而不是更改下面的功能示例：

$("#time_slider").slider({
    orientation: "horizontal",
    range: false,
    min: 7,
    max: 28,
            step: 7,
    value: 7,
            animate: true,
    input: function (event, ui) {
        $("#time_field").val(ui.value);
        $("#time").text(ui.value);
        calculate();
    },
            slide: function (event, ui) {
        $("#time_field").val(ui.value);
        $("#timeDisp").text(ui.value);
    }
});

jquery滑块实时输出

4 个答案: