HTML切换按钮文本不更新？多按钮同ID导致切换失效问题

这个问题我太熟啦！核心原因其实很直白：HTML规范里明确要求ID必须是页面唯一的。你给多个按钮都用myToggle这个ID，jQuery的$('#myToggle')只会找到页面上第一个匹配的元素，剩下的按钮根本没被绑定点击事件，自然点了也没反应。

给你两个关键修改步骤，保证每个按钮都能独立切换：

1. 把ID换成Class #

先把按钮的id="myToggle"改成class="myToggle"，这样多个按钮可以共享同一个类名，同时符合HTML规范：

<button type="button" data-toggle="collapse" href="#" class="myToggle btn btn-secondary">am</button>
<button type="button" data-toggle="collapse" href="#" class="myToggle btn btn-secondary">am</button>
<!-- 可以无限添加更多按钮 -->

2. 修改jQuery代码，绑定Class并使用$(this) #

原来的代码里用$('#myToggle')只会选中第一个按钮，现在换成类选择器$('.myToggle')绑定所有按钮，并且用$(this)来操作当前被点击的那个按钮，这样每个按钮的状态都是独立的：

$(document).ready(function(){
  $('.myToggle').on('click', function () {
    // 先获取当前按钮的文本，trim()避免空格干扰判断
    var currentText = $(this).text().trim();
    if(currentText === "am"){
      $(this).text('pm');
    } else{
      $(this).text('am');
    }
  });
});

小提示：加trim()是个好习惯，万一按钮的HTML里不小心加了空格（比如<button> am </button>），也不会影响文本判断哦～

内容的提问来源于stack exchange，提问作者PvDev