使用jquery刪除和添加列表項上的類？

Question

我有一個帶保存帖子文本的列表項，它有一個save-post類，當我點擊它時，我想將此列表項的文本更改為unsave post並替換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'); }); 

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