GetElementsById中自动增加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

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

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

Answer 2

您可以使用一个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')。