切换按钮文本在 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 方法并且 returns 仅具有该 id 的第一个元素。

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

Answer 2

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

方法一

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');
    }

  });
});

方法二

或者，您可以使文本字段看起来像一个按钮，这样当您提交表单时，您就不必通过 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/>

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

Toggle button text is not changing in html?

html

javascript

css

toggle

twitter-bootstrap

方法一

方法二