javascript - querySelectorAll 与 addEventListener - 如何从变量中获取交互的元素和变量的数量

Question

我有 HTML：

<form name="form" ..

<input type="text" name="title1" id="title1" class="f_title" value="smth LV">
<input type="text" name="title2" id="title2" class="f_title" value="smth EN">
<input type="text" name="title3" id="title3" class="f_title" value="smth DE">

<input type="text" name="url1" id="url1" class="f_url" value="smth-lv">
<input type="text" name="url2" id="url2" class="f_url" value="smth-en">
<input type="text" name="url3" id="url3" class="f_url" value="smth-de">

如果用户更改输入“标题”，我会用该值进行一些替换，并且我想将其设置为正确的输入“url”。 以“很好”的方式，我无法获取交互字段的“数量”，也无法将其设置为相应的“url”...我想我知道如果使用 for() 和 eval() 该怎么做。 如果我使用 [正确] JS 的东西，比如 querySelectorAll 和 addEventListener:

let i = 1;
document.querySelectorAll('.f_title').forEach(el => {
 el.addEventListener('change', () => {

  if (typeof form.url[i] !== 'undefined') {
    ...
    form.url[i] = form.title[i].value;  // for example - if changes input "title2" - how to alert(2) and how to reference to form.url2 in this loop?
  }

 });
 i++;
});

Answer 1

您可以使用

forEach

回调获取的第二个参数：标题项的索引（在示例中为 0、1 或 2）。如果您还查询 url 输入的集合，那么您可以使用该索引来访问相应的 url 输入。

例如，我以小写形式复制输入值，并将所有空格替换为连字符：

const urlInputs = document.querySelectorAll('.f_url');
document.querySelectorAll('.f_title').forEach((el, i) => {
 el.addEventListener('input', () => {
  if (urlInputs[i]) {
    urlInputs[i].value = el.value.replaceAll(" ", "-").toLowerCase();
  }
 });
});

<form name="form">

<input type="text" name="title1" id="title1" class="f_title" value="smth LV">
<input type="text" name="title2" id="title2" class="f_title" value="smth EN">
<input type="text" name="title3" id="title3" class="f_title" value="smth DE">

<input type="text" name="url1" id="url1" class="f_url" value="smth-lv">
<input type="text" name="url2" id="url2" class="f_url" value="smth-en">
<input type="text" name="url3" id="url3" class="f_url" value="smth-de">

</form>