切换按钮的文本在html中没有变化？

Question

单个按钮的切换文本值正在更改，当我为多个切换按钮使用相同的ID时，其不变。

在这里切换按钮是上午还是下午。

这是我使用的JavaScript代码

$(document).ready(function(){
  $('#myToggle').on('click', function () {
    var text=$('#myToggle').text();
    if(text === "am"){
      $(this).html('pm');
    } else{
      $(this).text('am');
    }
  });
});

这是我用于切换按钮的html行：

<button type="button" data-toggle="collapse" href= "#" id="myToggle" class="btn btn-secondary">am</button>

这是我的截图：

它说id值myToggle必须是唯一的。

Answer 1

 $(document).ready(function(){ $('.btn').on('click', function () { var text = $(this).text(); if(text === "am"){ $(this).html('pm'); } else{ $(this).text('am'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" data-toggle="collapse" href= "#"class="button btn btn-secondary">am</button> <button type="button" data-toggle="collapse" href= "#" class="button btn btn-secondary">am</button> 

根据W3C规范，具有多个具有相同ID的元素不是有效的html。

在这种情况下，jQuery使用document.getElementById方法，并且该方法仅返回具有该ID的第一个元素。

如果您需要多个元素，请使用classes

Answer 2

ID在DOM中应该是唯一的。 因此，这里可以使用类来完成。 向所有具有类似操作的按钮添加新类，例如。 btn-toggle-time

方法1

HTML：

<button type="button" data-toggle="collapse" href= "#" 
   class="btn btn-secondary btn-toggle-time">am</button>

使用Javascript：

$(document).ready(function(){
  $('.btn-toggle-time').on('click', function (e) {
    e.preventDefault();
    var text = $(this).text();
    if(text === "am"){
      $(this).html('pm');
    } else{
      $(this).text('am');
    }

  });
});

方法2

另外，您可以使文本字段看起来像一个按钮，因此提交表单时，您将不必通过javascript来维护值。 运行代码片段以查看。 在这种情况下，您无需更改文本，而是可以更改文本字段的值。

 $(".input-meridiem").on('click', function(e){ e.preventDefault(); var meridiem = $(this).val() if(meridiem === 'AM'){ $(this).val('PM'); } else { $(this).val('AM'); } }); 

 input.input-meridiem{ border: none; padding: 10px 20px; color: white; background: #363239; cursor: pointer; width: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input value="AM" class="input-meridiem" name="meridiem" readonly/>