Question

我有一个jquery ui微调器输入，它显示从0％到100％的值，增量为10。这很好。我正在尝试添加一些额外的功能。

这就是我想要的：在我的微调器字段中，我的值可以是0％到100％之间的任何值我开始增加或减少它应该显示100％的剩余数量。

如果我在微调器中使我的值为40％而在输入字段旁边的文本中应该显示剩余的60％。这有可能吗？提前致谢，抱歉我的英语不好。

JS

$("#spinner").spinner({
    min: 0,
    max: 100,
    step: 10
});

HTML

<input id="spinner"  value="0"/>
<p class="right totalResult">100% Remaining</p>

Answer 1

当然，一个简单的方法是将100包裹在一个范围内并使用这个jQuery：

$("#spinner").spinner({
    min: 0,
    max: 100,
    step: 10,
    spin: function (e, ui) {
        $('p.right.totalResult span').text(100-ui.value)
    }
});

<强> jsFiddle example

Answer 2

试试此代码

$("#spinner").spinner({
    min: 0,
    max: 100,
    step: 10,
    spin: function( event, ui ) {
        var remain = 100 - ui.value;
     $(".totalResult").html(remain + "% Remaining");
    }
});

DEMO

Answer 3

您需要为旋转添加事件侦听器（当它上升或下降时）。你可以这样做：

$("#spinner").spinner({
    min: 0,
    max: 100,
    step: 10
}).on("spin",function(event, ui){
    $(".right").text((100 - ui.value) + "% Remaining")
});

我希望这有帮助！

jQuery ui spinner百分比计算

3 个答案: