Блог

Главная - Вопросы по программированию - Изменять текст взад и вперед при нажатии кнопки

Изменять текст взад и вперед при нажатии кнопки

#javascript #jquery

#javascript #jquery

Вопрос:

Вот небольшое недопонимание того, как можно изменить текст элемента обратно после того, как он уже был изменен? 

 $('.target').click(function() {
  
  

  if($(this).hasClass('clicked')) {
    $(this).text('ORIGINAL').toggleClass('clicked');
  }

  $(this).text('CLICKED').toggleClass('clicked');

});  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a class='target'>ORIGINAL</a>

Ответ №1:

Вы могли бы сохранить оригинал в хранилище данных jQuery, а затем получить его обратно

 $('.target').each(function() {
    
    $(this).data('original', $(this).text());
    
}).on('click', function() {
    $(this).toggleClass('clicked').text(function(_, txt) {
        var org = $(this).data('original');
    
        return txt === org ? 'CLICKED' : org;
    });
});  
 .clicked {color: red}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="target">Click</div>
<br/>
<div class="target">Click</div>
<br/>
<div class="target">Click</div>
<br/>
<div class="target">Click</div>
<br/>
<div class="target">Click</div>
<br/>

Ответ №2:

Последняя строка кода запускается при каждом нажатии. И он устанавливает текст на ЩЕЛЧОК.

Вам просто нужно использовать else оператор.

 $('.target').click(function() {

  if($(this).hasClass('clicked')) {
    $(this).text('ORIGINAL').toggleClass('clicked');
  } else {
    $(this).text('CLICKED').toggleClass('clicked');
  }
});  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a class='target'>ORIGINAL</a>