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

Question

我想要 'n' 个共享 100% 的 slider ，最初我有这样的数据:

<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 即。将此数字除以除事件输入之外的输入数量，即可得出需要从其他输入中删除的数量。此计算取代了您的增量计算。

fiddle :http://jsfiddle.net/jmrgkn0r/2/

您可能想要检查所有输入是否达到 0 或 100，并对此采取措施。