如何简化JS变量并按类获取，然后将它们的值相加？

Question

如果我有很多像这样的<input>s：

<input class="BUBU-1">
<input class="BUBU-2">
...
<input class="BUBU-1000">

我怎样才能使这些变量类似于：

var NEW1 = document.get...(" BUBU-1 ");
// ...
var NEW1000 = document.get...(" BUBU-1000 ");

但是相反的东西（如果可能的话）：

var SMTH = 1..1000;
var NEW[SMTH] = document.get...(" BUBU-[SMTH] ");

然后总结它们，像NEW1 + NEW2 + ... + NEW1000，但有一些功能，其中说“采取所有NEW[SMTH]并总结它们”。

Answer 1

您可以简单地获得这样的单个元素：

let n = 1;

document.querySelector(".BUBU-" + n); // This yields `<input class="BUBU-1">`.

您可以通过首先构建一个数字数组来获取它们的值的总和，mapping它们的选择器输入的数值，然后reduce它们为一个总和：

const sum = Array.from({
    length: 1000
  }, (_, index) => Number(document.querySelector(".BUBU-" + (index + 1)).value))
    .reduce((result, value) => result + value, 0);

console.log(sum);

如果要在计算总和之前删除空或非数字字段，请在.filter((value) => !isNaN(value))行之前使用.reduce;这filters NaN values。

如果只需要数值的数组，请删除reduce步骤。如果您希望将值作为字符串而不是数字，请删除Number调用。如果你只想要元素而不是它们的值，那么只使用document.querySelector(".BUBU-" + (index + 1))。

---

如果所有<input>s都是父元素的子元素，例如一个<div id="allInputs">，选择和总结它们变得更容易：

const sum = Array.from(document.querySelector("#allInputs input"), ({value}) => Number(value))
  .reduce((result, value) => result + value, 0);

console.log(sum);

---

如果你的<input>s只包含数字，请考虑给它们type="number"属性。然后，你也可以使用像Array.from(document.querySelector("#allInputs input"), ({valueAsNumber: number}) => number)等。

---

看到你的JSFiddle，确保你的选择器是正确的。 .BUBU-1用class="BUBU-1"选择元素，#BUBU-1用id="BUBU-1"选择（第一个）元素。

如果您想收听change事件，请考虑使用事件委派：

在vanilla JavaScript中：

document.body.addEventListener("change", function(e){
  if(e.target.matches("input")){
    // Calculate sum, etc.
  }
});

在jQuery中：

$("body").on("change", "input", function(e){
  // Calculate sum, etc.
});

由于您的JSFiddle似乎比您的问题更复杂，但您刚刚询问了如何将输入字段与常用模式的类名相加，如果您对更复杂的问题有疑问，请考虑提出一个新问题。

Answer 2

1. 使用document.querySelectorAll('[class^=BUBU-]');将所有输入元素放在NodeList中，并使用数组解构运算符...创建一个数组（NodeList是一个类似于数组的结构，因此它可以很容易地转换为数组，允许使用可用于Arrays的方法，请参阅步骤2）。 （[class^=BUBU-]匹配所有具有以class开头的BUBU-属性的元素）。
2. 使用Array.prototype.reduce()来累积值。请记住，值始终是输入上的字符串，因此在添加之前将它们转换为Number。

const inputs = [...document.querySelectorAll('[class^=BUBU-]')]

function sum(collection) {
  return collection.reduce((acc,val) => { return acc+Number(val.value) }, 0)
}

console.log(sum(inputs));

<input class="BUBU-1" value="1">
<input class="BUBU-2" value="2">
...
<input class="BUBU-1000" value="1000">

看到你在JSFiddle中使用的是id而不是class，只需将选择器调整为document.querySelectorAll('[id^=BUBU-]'）`。