javascript：为querySelectorAll中的所有元素创建variables/const

Question

我的代码中有多个，每个都有 class="output" 和唯一 ID。

<p>Workers: <span class="output" id="workersOutput">0</span><span class="output" id="workersProdOutput"></span></p>

我想使用 querySelectorAll 通过 variables/const 使它们在 js 中可寻址，以便我可以使用 textContent 更改它们的值。

在dividually 中，我会执行以下操作来查找每个 div，然后在第二行中将其更新到屏幕上。

const workersOutput = document.getElementById('workersOutput');
workersOutput.textContent = `${workers}`;

这真的很乱，但当我有很多事情要做时（目前有 12 个，以后还会有更多）。

使用 querySelectorAll，我可以制作一些混合版本，使用它们在节点列表中的 individual 索引号。它不是完全可读或易于使用，因为附加到每个的数据只有在我将它输出到某个地方时才可见。更不用说如果我添加更多 divs，这些数字将改变并且不再分配给相同的 ID。

const outputs = document.querySelectorAll('.output');
outputs[2].textContent = `${workers}`;

我不能使用 forEach 为每个使用附加到该索引号的 ID 创建一个变量吗？或类似于以下示例的内容（我知道那不是它的工作原理，但我想传达这个想法）：

const outputs = document.querySelectorAll('.output');

outputs.forEach((output) => {
    const outputs[2] = document.getElementById(output.id);
});

我可能还不知道如何以“正确的方式”完成这项工作，我是编码新手。

Answer 1

使用属性名称为 ID 的对象。

const outputs = {};
document.querySelectorAll(".output").forEach(el => outputs[el.id] = el);

javascript: Create variables/const for all elements in qureySelectorAll