jQuery removeClass和addClass无法正常工作

Question

我创建了一个按钮,当用户点击它时,当前的类应该替换为新的,反之亦然.但是addClass或removeClass都没有显示任何效果.我没有在控制台日志中看到任何错误或警告消息.

JQuery代码:

$('.vote_btn').click(function(){
  $.ajax({
        url:'/joseph/pages/votes.php',
        type: 'post',
        //dataType:'json',
        data:{'comment_id':$(this).data('commentid')},
        success: function(data){
          if(data == 'up'){
              $(this).removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up');
          } else if(data == 'reversed') {
              $(this).removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
          } else {
            alert(data);
          }
        }
  });
});

HTML代码:

<span id="<?=$comment['id']?>" class="fa fa-thumbs-o-up vote_btn" data-commentid="<?=$comment['id']?>" data-postid="<?=$getpost['post_id']?>" data-who="<?=$comment['commenter_id']?>"></span>

Answer 1

jQuery对象$(this)不再引用单击的对象.vote_btn.在成功回调中,将单击的按钮存储在变量中并在回调中使用此变量:

$('.vote_btn').click(function(){
  var _this = $(this);

  $.ajax({
        url:'/joseph/pages/votes.php',
        type: 'post',
        //dataType:'json',
        data:{'comment_id':_this.data('commentid')},
        success: function(data){
          if(data == 'up'){
              _this.removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up');
          } else if(data == 'reversed') {
              _this.removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
          } else {
            alert(data);
          }
        }
  });
});

希望这可以帮助.