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类并使用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
  };
}

正如NewToJS所提到的，您也可以var nodes = document.getElementsByClassName('my-class')。

Answer 2

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

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 />

GetElementsById中的自动增量ID

2 个答案: