Блог

Главная - Вопросы по программированию - изменение текста в jquery: проверено

изменение текста в jquery: проверено

#jquery

#jquery

Вопрос:

Я пытаюсь создать функцию для изменения текста при выборе флажка, пожалуйста, проверьте следующее…

Код Jquery

 $(document).ready(function() {
if($('#active').is(':checked')) {
    $('strong', '#status').text('Active');
}
else {
    $('strong', '#status').text('Inactive');
}
});

Html-форма

  <span id="status"><input name="active" type="checkbox" value="1" id="active" />
<strong>Active</strong></span>

Это работает идеально при загрузке страницы, но если мы изменим значение #active или нажмем #active, это не изменит текст на active или inactive. спасибо за помощь.

Ответ №1:

Внутри готового к оформлению документа блока или непосредственно перед закрывающим тегом body сначала вам нужно прикрепить обработчик изменений к элементу. Затем вы можете запустить событие изменения, чтобы текст был правильным при рендеринге страницы.

 $(function(){

    function setDisplayText() {

      var displayText = this.checked ? 'Active' : 'Inactive';
      $('strong', '#status').text(displayText);

    }

    //setup change handler and then trigger 
    //it to ensure correct text on doc ready
    $('#active').change(setDisplayText)
                .trigger('change');

});

Ответ №2:

Вам нужно прикрепить прослушиватель событий к вашему флажку.

 $(document).ready(function() {

  function updateStatus() {
    if($('#active').is(':checked')) {
      $('strong', '#status').text('Active');
    }
    else {
      $('strong', '#status').text('Inactive');
    }
  }

  $('#active').bind('change', updateStatus);

  updateStatus();

});

Обновление — изменен код для запуска и при готовности документа.

Комментарии:

1. ваш код работает, но не срабатывает при первом нажатии, когда я загружаю страницу, флажок не установлен, и он отображается активным, а не неактивным.

2. это также можно сделать, запустив событие изменения при загрузке страницы. что-то вроде $('#active').trigger('change');

Ответ №3:

Это потому, что вы не привязываете код к событию onchange флажка.

При загрузке страницы ваш код просто проверяет, установлен флажок или нет, потому что код привязан к событию onready объекта document. После этого он больше не будет запускать тот же код

Вы можете попробовать это. 

 $('#active').bind('change', function() {
    if($('#active').is(':checked')) {
     $('strong', '#status').text('Active');
    }
    else {
     $('strong', '#status').text('Inactive');
    }    
});

Ответ №4:

Вам надоело использовать обработчик событий ‘change’?

Это выглядело бы примерно так:

 $('#active').change(function(e)
{
  if($(this).is(':checked')) {
    $('strong', '#status').text('Active');
  }
  else {
    $('strong', '#status').text('Inactive');
  }
});

Ответ №5:

Вы можете вызвать функцию при замене флажка :

 <input name="active" type="checkbox" value="1" id="active" onchange="ChangeText();"/>

$(document).ready(function() { 
function ChangeText() {
if($('#active').is(':checked')) {
     $('strong', '#status').text('Active');
 } else {
     $('strong', '#status').text('Inactive'); 
} 
}
});

вы можете вызвать ту же функцию (changeText) при загрузке тела.