使用jquery删除并添加列表项上的类？

Question

我有一个带有保存post文本的列表项，它有一个save-post类，当我单击它时，我想将这个列表项的文本更改为取消保存的帖子，并在取消保存的post类中替换类save-post，我尝试这样做，但是列表项文本和类中的更改只发生了一次。

​

$('.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()是绑定事件到目标选择器时，但是单击它之后，类更改为另一个类。您应该为此使用事件委托。

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

​

Answer 3

使用.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>

​