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

Question

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

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>

Answer 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 循环中链接事件处理程序 Javascript NodeList

Linking Event Handlers in forEach Loop Javascript NodeList

javascript

nodelist

addeventlistener

dom-events