jQuery UI微调控件百分比计算

Question

我有一个 jQuery UI Spinner 输入框，它显示从 0% 到 100% 的值，每次增加 10。这很好。我正在尝试添加一些额外的功能。

这是我想要的：在我的微调字段中，我的值可以是从 0% 到 100% 的任何值，如果我开始增加或减少值，它应该显示剩余的百分比是多少。

就像如果我将我的值设置为微调器中的 40%，那么在输入字段旁边的文本中应该显示剩余的 60%。这个可能吗？提前感谢您的帮助，抱歉我的英语不好。 JS FIDDLE EXAMPLE js

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

HTML

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

- Raihan

Answer 1

当然，一种简单的方法是将100包装在一个span中，并使用以下jQuery：

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

jsFiddle example

- j08691

---

太好了！这是最简单的方法。谢谢！上帝保佑你。你让我的一天变得美好。 - Raihan

Answer 2

尝试这段代码

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

DEMO

- Girish

Answer 3

您需要为旋转（向上或向下）添加事件监听器。 您可以像下面这样做：

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

我希望这可以帮助你！

- Ricky Stam