如何用Document.QuerySelectorAll（）动态选择元素进行函数调用？

Question

我一直在做这把小提琴：

https://jsfidle.net/j1vrb7to/165/

那把小提琴的密码是这样的：

HTML：

<div id="CalculationContainer">
  <input type="numbers" class="form-control new-tuition" /> <br />
  <input type="numbers" class="form-control new-tuition" /> <br />
  <input type="numbers" class="form-control new-tuition" /><br /><br />
  <input type="numbers" id="new-tuition-total" disabled="disabled" /><br /> <br />

  <input type="numbers" class="form-control new-state" /> <br />
  <input type="numbers" class="form-control new-state" /> <br />
  <input type="numbers" class="form-control new-state" /><br /><br />
  <input type="numbers" id="new-state-total" disabled="disabled" />
</div>

JavaScript：

const NewTuitionInputs = document.querySelectorAll("div#CalculationContainer > input.new-tuition");
const NewStateInputs = document.querySelectorAll("div#CalculationContainer > input.new-state");

NewTuitionInputs.forEach(function(input) {
  input.onchange = function() {
    var total = 0;
    NewTuitionInputs.forEach(function(input) {
      total += parseInt(input.value);
    });
    document.getElementById("new-tuition-total").value = total;
  }
});

NewStateInputs.forEach(function(input) {
  input.onchange = function() {
    var total = 0;
    NewStateInputs.forEach(function(input) {
      total += parseInt(input.value);
    });
    document.getElementById("new-state-total").value = total;
  }
});

当用户在文本框中输入值时，我想更新另一个字段的值以显示正在运行的总计。最终，我将需要在我的表单上跟踪20+运行总数。不需要维护20+个函数，是否可以使用单个函数动态计算运行总数？下面是一些伪代码来演示我的想法：

var ThisInput = document.querySelectorAll("div#CalculationContainer > input.[INPUT_CLASS_PARAMETER_HERE]");

ThisInput.forEach(function(input) {
  input.onchange = function() {
    var total = 0;
    ThisInput.forEach(function(input) {
      total += parseInt(input.value);
    });
    document.getElementById("[DYNAMICALLY_CHOOSE_WHERE_TO_DISPLAY").value = total;
  }
});

Answer 1

您有一个约定，即输入有一个类，然后总数有一个带有该类名的id加上-total。您可以利用这一点来创建一个通用函数：

function trackTotals(className){
    var inputs = document.querySelectorAll(`div#CalculationContainer > input.${className}`);
    inputs.forEach(input => {
      input.addEventListener("change",()=>{
        var total = [...inputs].reduce((acc,i) => acc + (parseInt(i.value,10) || 0),0);
        document.getElementById(`${className}-total`).value = total;
      })
    })
}

然后用法是：

trackTotals("new-tuition");
trackTotals("new-state");
// whatever else that follows same conventions

下面是一个活生生的例子：

null

js prettyprint-override">trackTotals("new-tuition");
trackTotals("new-state");

function trackTotals(className){
    var inputs = document.querySelectorAll(`div#CalculationContainer > input.${className}`);
  inputs.forEach(input => {
    input.addEventListener("change",()=>{
      var total = [...inputs].reduce((acc,i) => acc + (parseInt(i.value,10) || 0),0);
      document.getElementById(`${className}-total`).value = total;
    })
  })
}

<div id="CalculationContainer">
<input type="numbers" class="form-control new-tuition"/> <br/>
<input type="numbers" class="form-control new-tuition"/> <br/>
<input type="numbers" class="form-control new-tuition"/><br/><br/>
<input type="numbers" id="new-tuition-total" disabled="disabled"/><br /><br />

<input type="numbers" class="form-control new-state"/> <br/>
<input type="numbers" class="form-control new-state"/> <br/>
<input type="numbers" class="form-control new-state"/><br/><br/>
<input type="numbers" id="new-state-total" disabled="disabled"/>
</div>