1

我有这个代码：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>

查询：

$(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）另一个问题是，如何为 . 我的意思是输入将由用户在典型的表单输入中输入。它也会计算。

4

4 回答 4

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

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

小提琴

于 2013-04-13T11:23:13.517 回答
0

你有这个：

 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
        }

对两个滑块都这样做。

于 2013-04-13T11:24:31.927 回答
0

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

关于你的第二个问题，用这个新语句设置一个更好的 jsfiddle。我知道，这会花你几分钟的时间，但最好还是花点自己的时间而不是花点其他成员的时间……

于 2013-04-13T11:21:49.727 回答
0

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

$("#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);
    }
});
于 2017-10-24T09:14:35.470 回答