Question

我想要＆＃39; n＆＃39;共享100％的滑块，最初我有这样的数据：

<input type="number" id="a" min="0" max="100" value="60"/>
<input type="number" id="b" min="0" max="100" value="30"/>
<input type="number" id="c" min="0" max="100" value="10"/>

因此，如果#a从60％降低到40％，我希望#b和#c各增加10％。是否有一种已知的算法来分配百分比而不会覆盖#b和#c的先前值

这是一个不起作用的jsfiddle，和工作solution。

Answer 1

您需要以某种方式继续参考变更之前的总金额。你可以在每个输入元素上附加一个数据值，但是当你总是回滚到输入之间分布的100时，使用它作为参考是非常方便的：

var val_change = 100;

for (var i = 0; i < sliders.length; i++) {
    val_change -= parseFloat($(sliders[i]).val());
}

代码循环遍历所有输入并从初始值100中减去数量。如果在输入字段中按下向上键，则返回-1即。除了活动数量之外，将此数字除以输入数量，可以为您提供从其他输入中删除的数量。此计算将替换您的增量计算。

小提琴：http://jsfiddle.net/jmrgkn0r/2/

您可能需要检查没有任何输入达到0或100，并对此做些什么。

如何在多个元素之间分配百分比？

1 个答案: