GetElementById 中的自动递增 id

Question

请帮助我使用循环完成 getElementById() 中的 Id 递增。

<script type="text/javascript">
    document.getElementById('idA(increment)').onchange = function () {
     document.getElementById('idB(increment)').value = event.target.value
  }
</script>

而不是

<script type="text/javascript">
  document.getElementById(\'idA1\').onchange = function () {
     document.getElementById(\'idB1\').value = event.target.value
  }

  document.getElementById(\'idA2\').onchange = function () {
     document.getElementById(\'idB2\').value = event.target.value
  }

  document.getElementById(\'idA3\').onchange = function () {
     document.getElementById(\'idB3\').value = event.target.value
  }
</script>

Answer 1

您可以使用 css class 并使用 document.querySelectorAll('.my-class').

var nodes = document.querySelectorAll('.my-class');

for (var i = 0; i < nodes.length; ++i) {
  nodes[i].onchange = function() {
    // Do what you want here
  };
}

如 NewToN'S 所述，您还可以 var nodes = document.getElementsByClassName('my-class')。

Answer 2

您可以使用基于 class 的查找来定位所有元素，然后添加更改事件处理程序

var els = document.getElementsByClassName('id-a');
for (var i = 0; i < els.length; i++) {
  els[i].addEventListener('change', function() {
    document.getElementById(this.id.replace(/^idA/, 'idB')).value = event.target.value
  });
}

<input id="idA1" class="id-a" />
<input id="idB1" />
<br />
<input id="idA2" class="id-a" />
<input id="idB2" />
<br />
<input id="idA3" class="id-a" />
<input id="idB3" />
<br />
<input id="idA4" class="id-a" />
<input id="idB4" />
<br />

GetElementById 中的自动递增 id

auto increment id in GetElementsById

javascript

increment