Question

当我有这个时它工作正常。

//php
<input id="somename" type="button" value="Text1" />

//script
<script>
  document.getElementById('somename').onclick = function(){
    this.value = this.value === 'Text1' ? 'Text2' : 'Text1';
  }
</script>

但是当我有这个时它只适用于第一个按钮。

//php

<input id="somename" type="button" value="Text1" />
<input id="somename" type="button" value="Text1" />

//Script
<script>
  document.getElementById('somename').onclick = function(){
    this.value = this.value === 'Text1' ? 'Text2' : 'Text1';
  }
</script>

有没有办法为任意数量的按钮工作？我想对所有按钮使用相同的id和值。

提前谢谢！

Answer 1

你应该使用一个类，而不是一个id。您可以使用JQuery设置侦听器并更改somename类的所有元素的值：

<input class="somename" type="button" value="Text1" />
<input class="somename" type="button" value="Text1" />

<script>
  $('.somename').click(function(){$(this).val(this.value === 'Text1' ? 'Text2' : 'Text1')});
</script>

小提琴：http://jsfiddle.net/Lk6nfn2c/1/

Answer 2

您应该只有一个元素，并且具有特定的 id 。请改用名称或类 HTML属性。因此，您可以通过执行 document.getElementsByClassName 或 getElementsByName 来获取元素数组。

尝试使用纯粹的javascript

Array.prototype.forEach.call(document.getElementsByName('somename'), function(button){
    button.onclick = function(){
        this.value = this.value === 'Text1' ? 'Text2' : 'Text1';
    };
});

在HTML中，请记住更改 name 属性的 id 属性：

<input name="somename" type="button" value="Text1" />
<input name="somename" type="button" value="Text1" />

我已经让jsfiddle为你看到代码正常工作了。看看吧！

Answer 3

使用class而不是id然后迭代它们

//php

<input class="somename" type="button" value="Text1" />
<input class="somename" type="button" value="Text1" />

//Script
<script>
   var someNamesElm = document.getElementsByClass('somename');
   var someNamesElmNbr = someNamesElm.length;
   for (var i = 0; i < someNamesElmNbr; i++) {
     someNamesElm[i].onclick = function(){
        this.value = this.value === 'Text1' ? 'Text2' : 'Text1';
     }        
  }
</script>

使用相同的ID更改按钮值

3 个答案: