Удаление и добавление класса в элемент списка нажмите, используя jquery?

Question

У меня есть элемент списка с сохраненным текстом поста, и у него есть класс save-post, и когда я щелкаю по нему, я хочу изменить текст этого элемента списка на несохраненный пост и заменить класс save-post внутри несохраненного.post class Я пытался сделать это, но изменение в тексте и классе элемента списка происходит только один раз.

$('.save-post').click(function(){
  $(this).text('Unsave Post');
  $(this).removeClass('save-post');
  $(this).addClass('unsave-post');
});    
$('.unsave-post').click(function(){
  $(this).text('Save Post');
  $(this).removeClass('unsave-post');
  $(this).addClass('save-post');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-2 col-sm-2 col-md-2 drop">
   <a href=""><i class="fa fa-ellipsis-v post-drop"></i></a>
   <div class="drop-content">
     <ul>
       <li class="save-post">Save post</li>
     <li>Report post</li>
     <li>Hide post</li>
     <li>Unfollow User</li>
   </ul>
   </div>
</div>

Answer 1

Вы можете использовать метод toggleClass(), а затем проверить примененный класс и добавить соответствующий текст

$(document).on('click', '.save-post, .unsave-post', function(e) {
  var that = $(e.currentTarget);
  that.toggleClass('save-post unsave-post');
  if (that.hasClass('save-post')) {
    that.html('Save post');
  } else {
    that.html('Unsave post');    
  }  
});

.save-post {
  color: green
}
.unsave-post {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="save-post">Save post</li>
  <li class="save-post">Save post</li>
  <li class="save-post">Save post</li>
</ul>

Answer 2

Использование .click только прикрепит события к элементам, которые уже существуют.

Вам необходимо использовать обработчик событий, который отслеживает динамически создаваемые события, по которым щелкают, такие как on('click',

Затем,Вы можете использовать toggleClass, как это

$('.save-post').on('click',function(){
   if ($(this).text() == "Save post")
      $(this).text("Unsave post")
   else
      $(this).text("Save post");
   $(this).toggleClass('save-post');
   $(this).toggleClass('unsave-post');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-2 col-sm-2 col-md-2 drop">
   <a href=""><i class="fa fa-ellipsis-v post-drop"></i></a>
   <div class="drop-content">
     <ul>
         <li class="save-post">Save post</li>
         <li>Report post</li>
         <li>Hide post</li>
         <li>Unfollow User</li>
     </ul>
   </div>
</div>

Answer 3

Когда вы используете .click(), это событие привязки к целевому селектору, но после щелчка его класс меняется на другой.Для этого следует использовать делегирование события .

$(document).on('click', '.save-post', function(){
    $(this).text('Unsave Post');
    $(this).removeClass('save-post');
    $(this).addClass('unsave-post');
});    
$(document).on('click', '.unsave-post', function(){
    $(this).text('Save Post');
    $(this).removeClass('unsave-post');
    $(this).addClass('save-post');
});

$(document).on('click', '.save-post', function(){
    $(this).text('Unsave Post');
    $(this).removeClass('save-post');
    $(this).addClass('unsave-post');
});    
$(document).on('click', '.unsave-post', function(){
    $(this).text('Save Post');
    $(this).removeClass('unsave-post');
    $(this).addClass('save-post');
});

.save-post {color: red}
.unsave-post {color: blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-2 col-sm-2 col-md-2 drop">
  <a href=""><i class="fa fa-ellipsis-v post-drop"></i></a>
  <div class="drop-content">
    <ul>
      <li class="save-post">Save post</li>
      <li>Report post</li>
      <li>Hide post</li>
      <li>Unfollow User</li>
    </ul>
  </div>
</div>