javascript - 只有一个类值发生变化

Question

我目前使用文本字段来更改 html 中的文本。

我的文本字段:

  Voornaam:
  <h3 class="title1">Kevin</h3>
  <input type="text" id="myTextField1" />
  <br/><br/>

输入完文本后，按按钮:

  <input type="button" id="myBtn" value="Change" />

哪个触发此函数:

document.querySelector('#myBtn').addEventListener('click', function change() {
  function isInvalid(input) {
    return input.value.length == 0;
  }

  var titles = [...document.querySelectorAll('[class^="title"]')];
  var inputs = [...document.querySelectorAll('[id^="myTextField"]')];
  var anchor = document.querySelector('#myLink');

  if (inputs.some(isInvalid)) {
    alert('Write some real text please.');

    anchor.href = 'convert.php';
  } else {
    var querystring = inputs.map((input, index) => `var${index + 1}=${titles[index].textContent = input.value}`);
//    $('.title'+index).html(input.value);

    anchor.href = `convert.php?${querystring.join('&')}`;
  }
});

文本字段上方的值:

<h3 class="title1">Kevin</h3>

确实发生了变化，这很好，但也需要在其他地方进行更改。而这一项似乎没有改变。另一项应该改变的是:

  <p class="title1">Test.</p><p class="title2">Achternaam</p>

类标题一也应该在这里更改，尽管这不会发生。

有人可以告诉我我做错了什么吗？

Answer 1

根据您提供的代码，您犯的错误是您有一个包含 1 个输入元素的数组:#myTextField1

你通过map循环这个1的数组来改变标题数组(据我所知是3个左右的数组)。但问题是，因为输入数组只有索引 0，所以您也只会更改标题数组的第一个元素。

现在我完全理解了代码，这是一个可能的修复方法。一旦您知道要搜索的元素的索引，您基本上就需要执行标题选择器。

  var inputs = [...document.querySelectorAll('[id^="myTextField"]')];
  var querystring = inputs.map((input) => {
      // Remove all leading non-digits to get the number
      var number = input.id.replace( /^\D+/g, '');

      var titles = [...document.querySelectorAll('.title'+ number)];
      titles.forEach((title) => title.innerHTML = input.value);
      return `var${number}=${input.value}`;
  });

另外，不要依赖于 querySelectorAll 给你的索引的运气(当 id 为 'myTextField1' 的元素不是第一个在 DOM 中找到的元素时，你就完蛋了)，我现在从 id 字符串值中获取数字 => 变量 number。

在此处查看 working fiddle example .