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

Question

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

这里切换buttone am或pm。

这里是我使用的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规范，无效的html具有多个具有相同ID的元素。

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

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

Answer 2

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