Текст кнопки переключения не изменяется в html? - PullRequest
0 голосов
/ 25 апреля 2018

Значение переключения текста изменяется для одной кнопки, когда я использую один и тот же идентификатор для нескольких кнопок переключения, оно не меняется.

Здесь кнопка переключения 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>

вот мои скриншоты: enter image description here

И он говорит, что значение id myToggle должно быть уникальным.

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Идентификаторы должны быть уникальными в 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/>
0 голосов
/ 25 апреля 2018

$(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>

Недопустимо использовать html согласно спецификации W3C, если у одного и того же идентификатора более одного элемента.

jQuery в этом случае использует метод document.getElementById, который возвращает только первый элемент с таким идентификатором.

Если вам нужно более одного элемента, используйте classes

...