Question

我有一个带有保存帖子文本的列表项，它有一个save-post类，当我单击它时，我想将此列表项的文本更改为“不保存帖子”并替换类{{1} }在unsave-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');
});

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()时，将事件绑定到目标选择器，但单击该类后换了另一个。您应该使用event delegation。

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

使用jQuery在列表项单击上删除并添加类？

3 个答案: