javascript - 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 的第一个元素。

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