javascript - JS点击两次后不显示文字

Question

我有这个 JS 代码，它可以对我网站上的某些文章进行“喜欢”和“不同”操作。问题是当我点击 Like 时，Unlike 按钮显示正常，但是当我点击 Unlike 时，它​​不会再次显示 Like。在我再次单击“不同”后，它只是粘贴“不同”文本而不是显示“喜欢”。刷新页面后它再次工作。

点击两次后没有显示文本，但它仍然执行SQL方法。

我的 JS 代码

$(function(){ 
    $('.like').click(function(){
        var article = $(this).attr("id");
        var data = 'cid='+article;
        $('.like').html('Unlike');
        $('.like').removeClass('like');
        $('.unlike').addClass('unlike');
        $.ajax({
            type: 'POST',
            url: 'includes/like.php', 
            data: data,
            success: function(result){

            }
        });
    });

    $('.unlike').click(function(){
        var article = $(this).attr("id");
        var data = 'cid='+article;
        $('.unlike').html('Like');
        $('.unlike').removeClass('unlike');
        $('.like').addClass('like');
        $.ajax({
            type: 'POST',
            url: 'includes/like.php', 
            data: data,
            success: function(result){

           }
        });
    });
});

Answer 1

嗨 Youssef 你可以试试这个

“喜欢”

$(function() {

    $('.like-button').click(function(){
        var obj = $(this);
        if( obj.data('liked') ){
            obj.data('liked', false);
            obj.html('Like');
        }
        else{
            obj.data('liked', true);
            obj.html('Unlike');
        }
    });
});

这段代码很有魅力
完整代码

$(function() {

  $('.like').click(function(){
            article  = this.id,
            data     = {cid : article};
$.ajax({
            type: 'POST',
            url: 'includes/like.php',
            data: data,
            success: function (result) {
              $('.total_likes').html(result);
            }
        });
      var obj = $(this);
      if( obj.data('liked') ){
          obj.data('liked', false);
          obj.html('Like');
      }
      else{
          obj.data('liked', true);
          obj.html('Unlike');
      }

  });
});


$(function() {

  $('.removelike').click(function(){
            article  = this.id,
            data     = {cid : article};
$.ajax({
            type: 'POST',
            url: 'includes/like.php',
            data: data,
            success: function (result) {
              $('.total_likes').html(result);
            }
        });
      var obj = $(this);
      if( obj.data('unliked') ){
          obj.data('unliked', false);
          obj.html('UnLike');
      }
      else{
          obj.data('unliked', true);
          obj.html('Like');
      }

  });
});