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，所以你也只会改变titles数组的第一个元素。

现在我完全理解了代码，这是一个可能的解决方案。一旦知道要搜索的元素的索引，您基本上就想要做标题选择器。

  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 ＆＃39; myTextField1＆＃39; 的元素不是第一个在DOM，你搞砸了），我现在从id字符串值中取数字而不是=＆gt;变量number。

点击此处查看working fiddle example。

只有一个类值在变化

1 个答案: