javascript - 通过考虑每个范围的值共享剩余的 %，在 4 个范围输入之间共享 100%

Question

我有 4 个输入，我试图根据它们之前的价值分享它们的股权价值。

我想要实现的是，例如，如果我有一个 50% 的字段，另一个 25% 的字段，则其余字段将为 12.5% 如果我有两个字段为 29.75%，一个字段为 39.5%，最后一个字段为如果我有一个字段为 75%，一个字段为 20%，则为 1%，其他字段为 2.5%，依此类推。

这是我迄今为止尝试过的未成功的方法：

let ranges = [a,b,c,d];
let old_value = 1;

for(let rang of ranges)
{
    rang.onfocus=(e)=>{
    old_value=parseInt(e.target.value);
  }
    rang.onchange=(e)=>{
    console.log(old_value);
    let sortedRanges = ranges.filter(el=>el.name!=e.target.name);
    for(let cur of sortedRanges)
        cur.value-= (parseInt(e.target.value) - old_value)/4;
    old_value = e.target.value;
  }
}

<input name="a" id="a" type="range" value="25" min="1" max="100"/>
<input name="b" id="b" type="range" value="25" min="1" max="100"/>
<input name="c" id="c" type="range" value="25" min="1" max="100"/>
<input name="d" id="d" type="range" value="25" min="1" max="100"/>

我还尝试研究比例，例如，如果我有一个字段以前为 25，现在为 40，表示比例因子为 1.6，但我不知道这有什么用处。

此外，简单地将剩余百分比除以 3 的更简单方法不会将其削减，就好像另一个字段作为不同的值一样，三个剩余字段之间没有常规比率。

建议。

标签： javascriptmathpercentage

Answer 1

const ranges = [a,b,c,d];
ranges.forEach(rangeElement => {
  rangeElement.addEventListener('change', ({target: { value } }) => {
    rangeElement.setAttribute('value', (+value).toFixed(2));
    const rangeIndex = ranges.indexOf(rangeElement)
    const previousRanges = ranges.slice(0, rangeIndex);
    const nextRanges = ranges.slice(rangeIndex + 1);
    const sumOfPrevious = +value + previousRanges.reduce((acc, {value}) => acc + +value, 0)
    const valueOfRest = ((100 - sumOfPrevious) / nextRanges.length).toFixed(2)
    nextRanges.forEach(range => range.setAttribute('value', valueOfRest));
  })
})

input::after {
  content: attr(value);
}

<input name="a" id="a" type="range" value="25" min="1" max="100"/>
<input name="b" id="b" type="range" value="25" min="1" max="100"/>
<input name="c" id="c" type="range" value="25" min="1" max="100"/>
<input name="d" id="d" type="range" value="25" min="1" max="100"/>