在 forEach 循环 Javascript NodeList 中链接事件处理程序答案

【问题标题】：Linking Event Handlers in forEach Loop Javascript NodeList在 forEach 循环 Javascript NodeList 中链接事件处理程序
【发布时间】：2019-12-17 04:10:49
【问题描述】：

我正在尝试在 NodeList 中链接两种输入类型的事件。我可以链接一对输入，但是一旦添加更多对，我就无法链接它们。我做错了什么？

var range = document.querySelectorAll(".inputRange");
var field = document.querySelectorAll(".inputNumber");
// console.log(range);
// console.log(field);

range.forEach(input => {
  input.addEventListener("input", e => {
    // console.log("RANGE EVENT: " +e.type)
    field.value = e.target.value;
  });
});
field.forEach(input => {
  input.addEventListener("input", e => {
    range.value = e.target.value;
  });
});

<div class="card grd">
  <h4 class="r1">Recipe</h4>
  <p>Low</p>
  <h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="0.75" step=".01" maxlength="8" /></h2>
  <div class="sldcon">
    <input class="inputRange" id="range" type="range" min="0" max="100" value="0.75" step=".01" />
  </div>
  <p>Mid</p>
  <h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="35" step=".01" maxlength="8" /></h2>
  <div class="sldcon">
    <input class="inputRange" id="range" type="range" min="0" max="100" value="35" step=".01" />
  </div>
  <p>High</p>
  <h2 class="r2"><input class="inputNumber" id="num1" min="0" max="1000" type="number" value="40" step=".01" maxlength="8" /></h2>
  <div class="sldcon">
    <input class="inputRange" id="range" type="range" min="0" max="1000" value="40" step=".01" />
  </div>
</div>

【问题讨论】：

注意id 属性在整个文档中必须是唯一的。即使它可能只是复制粘贴快速错误，也不要再这样了。

标签： javascript dom-events addeventlistener nodelist

【解决方案1】：

仅遍历一个集合，并在循环内，通过导航附近的 DOM 获取对链接输入的引用，然后向两者添加侦听器：

document.querySelectorAll(".inputNumber").forEach((field) => {
  const range = field.parentElement.nextElementSibling.children[0];
  range.oninput = () => field.value = range.value;
  field.oninput = () => range.value = field.value;
});

<div class="card grd">
  <h4 class="r1">Recipe</h4>
  <p>Low</p>
  <h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="0.75" step=".01" maxlength="8" /></h2>
  <div class="sldcon">
    <input class="inputRange" id="range" type="range" min="0" max="100" value="0.75" step=".01" />
  </div>
  <p>Mid</p>
  <h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="35" step=".01" maxlength="8" /></h2>
  <div class="sldcon">
    <input class="inputRange" id="range" type="range" min="0" max="100" value="35" step=".01" />
  </div>
  <p>High</p>
  <h2 class="r2"><input class="inputNumber" id="num1" min="0" max="1000" type="number" value="40" step=".01" maxlength="8" /></h2>
  <div class="sldcon">
    <input class="inputRange" id="range" type="range" min="0" max="1000" value="40" step=".01" />
  </div>
</div>

或者您可以在其他集合上引用相同的索引：

const ranges = document.querySelectorAll(".inputRange");
document.querySelectorAll(".inputNumber").forEach((field, i) => {
  const range = ranges[i];
  range.oninput = () => field.value = range.value;
  field.oninput = () => range.value = field.value;
});

<div class="card grd">
  <h4 class="r1">Recipe</h4>
  <p>Low</p>
  <h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="0.75" step=".01" maxlength="8" /></h2>
  <div class="sldcon">
    <input class="inputRange" id="range" type="range" min="0" max="100" value="0.75" step=".01" />
  </div>
  <p>Mid</p>
  <h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="35" step=".01" maxlength="8" /></h2>
  <div class="sldcon">
    <input class="inputRange" id="range" type="range" min="0" max="100" value="35" step=".01" />
  </div>
  <p>High</p>
  <h2 class="r2"><input class="inputNumber" id="num1" min="0" max="1000" type="number" value="40" step=".01" maxlength="8" /></h2>
  <div class="sldcon">
    <input class="inputRange" id="range" type="range" min="0" max="1000" value="40" step=".01" />
  </div>
</div>

【讨论】：

我想我明白你在那里做了什么。声明范围，然后获取所有输入数字，但是您能否在 forEach 中稍微解释一下后半部分，以便我更好地理解用法？谢谢你！！！
每个被迭代的字段都在 h2 内，因此导航到 parentElement 会转到 h2。该 h2 的下一个元素兄弟的第一个子元素是范围输入，因此 .nextElementSibling.children[0] 会将您带到那里。