添加和刪??除具有比率的輸入并重新計算它們

我正在嘗試制作一個簡單的網站，您有一個按鈕，每次點擊按鈕時，都會創建一個輸入。您還可以通過旁邊的叉號洗掉輸入（洗掉它）（按鈕和叉號 [添加和洗掉元素] 不是此問題的主題，因此它們不會顯示在螢屏截圖中）。

現在輸入包含一個可以更改的百分比值。默認情況下，如果你有一個輸入，它的值為 100，當有 4 個輸入時，值為 25 等等......當添加新輸入時，所有未手動編輯的輸入（我們將對其進行修改）應該相應地重新計算. 您可以更改輸入值（其中任何一個）以設定保持不變的百分比。把它想象成一個“機會”。如果一個輸入為 50，則其他輸入（例如其他 2 個輸入）的百分比應為 25（因為您設定了 50 個，所以剩余 50 個，因此您將其劃分為這些輸入）。

您可以設定多個固定值，它總是會重新計數。您可以洗掉一個輸入（已編輯或未編輯），它應該重新計算其余的（但不是其他已編輯的）。

例子：

您有 5 個輸入，您編輯了 1. 和 2. 一個的值為 40 和 30。所以您還剩下 30 (%)。它在其余 3 個輸入之間分配，每個輸入 10 (%)。

我的做法：

var inputs = document.querySelector(".ratio:not(.fresh)"); //.ratio is class of the inputs and .fresh is a class that all inputs have when created, but loose when edited
    var sum = 0; //sum of the edited inputs
    $(inputs).each(function(){
        sum  =  $(this).val();
    });

    var summary = 100 - sum; //Summary is the remaining value that is to be divided between the not edited inputs
    ratio = summary/($(".fresh").length 1); //ratio is the new value of .ratio input and is created when dividing Summary by all un-edited elements
    $(".fresh").val(ratio);

但老實說它應該在一個函式中，因為你應該在添加/洗掉時呼叫它來重新計算它。而且它不能正常作業（它可以，但不能編輯超過 1 個輸入）。我堅持下去了。

有什么幫助嗎？謝謝！

編輯：

添加更多代碼片段：

結構體：

<button class="adder">Create input</button>
<div class="inputs"></div>

添加輸入：

var component = document.createElement('div');
component.className = "component";
component.innerHTML = '<img  src="../images/icons/delete_component.svg" alt="添加和刪??除具有比率的輸入并重新計算它們"><input  type="number" placeholder="' ratio '" name="ratio[]" value="' ratio '"><p >%</p>'

inputs.appendChild(component);

uj5u.com熱心網友回復：

這是一個香草 JS 解決方案。我希望我能正確理解您的要求。

function recalc(){
const inps=[...cont.querySelectorAll("input")].reduce((a,c)=>{
  if(!c.classList.contains("fresh")) a.sum= c.value (a.sum||0);
  else a.push(c);
  return a;
 }, []);
 const v=(100-(inps.sum||0))/inps.length;
 inps.forEach(inp=>inp.value=v);
}
const cont=document.querySelector("div");
 
document.querySelector("button").onclick=ev=>{
 const div=document.createElement("div");
 div.innerHTML=`<input type="number" ><button> x </button>`;
 cont.append(div);
 recalc();
} 
cont.onclick=ev=>{
 if (ev.target.tagName=="BUTTON"){
  ev.target.closest("div").remove();
  recalc()
 }
}
cont.addEventListener("input",ev=>{
  ev.target.classList.remove("fresh");
 recalc();
})

<button>   </button>
<div class="container"></div>

uj5u.com熱心網友回復：

var inputsContainer = document.querySelector(".inputs");
var inputs = Array.from(inputsContainer.querySelectorAll("input"));
var inputsTouched = new Array(inputs.length).fill(false);

function add() {
  var num = inputs.length;
  var component = document.createElement("div");
  component.className = "component";
  component.innerHTML =
    '<img  src="../images/icons/delete_component.svg" alt="添加和刪??除具有比率的輸入并重新計算它們">'  
    '<input id="i'   num   '"  type="number" placeholder="0" name="ratio[]" '  
    'value="0" onchange="update('   num   ')"><span >%</span>';

  inputsContainer.appendChild(component);
  inputsTouched.push(false);
  inputs = Array.from(inputsContainer.querySelectorAll("input"));

  reevaluate();
}

function reevaluate() {
  var touched = inputs.filter((el, i) => inputsTouched[i]);
  var notTouched = inputs.filter((el, i) => !inputsTouched[i]);

  var sum = touched.reduce((prev, curr) => prev    curr.value, 0);
  var ratio = (100 - sum) / notTouched.length;

  if (ratio < 0.0001) {
    ratio = 0
  }

  notTouched.forEach(el => el.value = ratio);
}

function update(num) {
  inputsTouched[num] = true;
}

<button class="adder" onclick="add()" type="button">Create input</button>
<div class="inputs"></div>

標籤：javascript 查询

上一篇：創建一個底部邊框，它是子跨度底行的長度

下一篇：Jquery或運算子問題