Javascript 单击两次后JS不显示文本

我有这个JS代码，这是做喜欢和不喜欢的一些文章在我的网站。问题是当我单击“喜欢”时，“不喜欢”按钮显示良好，但当我单击“不喜欢”时，它不会再次显示“喜欢”。在我再次单击“不像”后，它只是粘贴“不像”文本，而不是显示“像”。我刷新页面后，它再次工作

我单击两次后，文本不会显示，但它仍然执行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){

           }
        });
    });
});

---

您应该在ajax回调中更改类和文本！我不知道它是否能解决你的问题，但至少必须这样做

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


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

---

您应该在ajax回调中更改类和文本！我不知道它是否能解决你的问题，但至少必须这样做

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


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

---

事件侦听器在绑定时附加到与选择器匹配的元素，以后更改类不会向事件处理程序添加或删除元素

创建自己的切换功能

$(function () {
    $('.like').on('click', function() {
        var flag     = $(this).data('flag'),
            article  = this.id,
            data     = {cid : article};

        $(this).html(flag ? 'Like' : 'Unlike')
               .data('flag', !flag);

        $.ajax({
            type: 'POST',
            url: 'includes/like.php',
            data: data,
            success: function (result) {

            }
        });
    });
});

这是完整的代码，它的工作也非常好

$(function () {
    $('.like').on('click', function() {
        var flag     = $(this).data('flag'),
            article  = this.id,
            data     = {cid : article};

        $(this).html(flag ? 'Like' : 'Unlike')
               .data('flag', !flag);

        $.ajax({
            type: 'POST',
            url: 'includes/like.php',
            data: data,
            success: function (result) {
              $('.total_likes').html(result);
            }
        });
    });
});

$(function () {
    $('.removelike').on('click', function() {
        var flag     = $(this).data('flag'),
            article  = this.id,
            data     = {cid : article};

        $(this).html(flag ? 'Unlike' : 'Like')
               .data('flag', !flag);

        $.ajax({
            type: 'POST',
            url: 'includes/like.php',
            data: data,
            success: function (result) {
              $('.total_likes').html(result);
            }
        });
    });
});

---

事件侦听器在绑定时附加到与选择器匹配的元素，以后更改类不会向事件处理程序添加或删除元素

创建自己的切换功能

$(function () {
    $('.like').on('click', function() {
        var flag     = $(this).data('flag'),
            article  = this.id,
            data     = {cid : article};

        $(this).html(flag ? 'Like' : 'Unlike')
               .data('flag', !flag);

        $.ajax({
            type: 'POST',
            url: 'includes/like.php',
            data: data,
            success: function (result) {

            }
        });
    });
});

这是完整的代码，它的工作也非常好

$(function () {
    $('.like').on('click', function() {
        var flag     = $(this).data('flag'),
            article  = this.id,
            data     = {cid : article};

        $(this).html(flag ? 'Like' : 'Unlike')
               .data('flag', !flag);

        $.ajax({
            type: 'POST',
            url: 'includes/like.php',
            data: data,
            success: function (result) {
              $('.total_likes').html(result);
            }
        });
    });
});

$(function () {
    $('.removelike').on('click', function() {
        var flag     = $(this).data('flag'),
            article  = this.id,
            data     = {cid : article};

        $(this).html(flag ? 'Unlike' : 'Like')
               .data('flag', !flag);

        $.ajax({
            type: 'POST',
            url: 'includes/like.php',
            data: data,
            success: function (result) {
              $('.total_likes').html(result);
            }
        });
    });
});

---

你好，如果你能试试这个的话

“就像”

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

$(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');
      }

  });
});

---

你好，如果你能试试这个的话

“就像”

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

$(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');
      }

  });
});

---

谢谢，但我已经试过了，我想在回叫时更新文本，不管是喜欢还是不喜欢。谢谢，但我已经试过了，我想在回叫时更新文本，不管是喜欢还是不喜欢。它工作得很好，但“喜欢”按钮有问题当我单击它时，它不会显示“不象”按钮
但是当我单击“不象”按钮时，它会显示“象”按钮精细
请稍等片刻并在视频中查看它@adeneo@YoussefSubehi-我可能弄错了标志部分，将其更改为

$（this）.html（标志？'Like'：'inference'）

以交换它们，编辑了答案。它像一个魔咒一样工作，但当我单击它时，它的“相似”按钮出现问题，它不会显示“不相似”按钮
但当我单击“不相似”按钮时，它会显示“相似”按钮很好
请稍等片刻，在视频中查看它@adeneo@YoussefSubehi-我可能弄错了标记部分，请将其更改为

$（this）.html（flag？'Like'：'inference'）

若要交换它们，请编辑答案。谢谢你像符咒一样工作，我会编辑它并添加完整代码谢谢你像符咒一样工作，我会编辑它并添加完整代码，你也可以使用.on与普通父项进行委托。

$（父项）。on（'click'，'Like'，function（）{

和类似的不一样…但是下面提供的其他解决方案可能更好：）@rlemon谢谢，如果您将其作为完整的代码编写，这将非常有用，而不仅仅是对我来说，对于其他会寻找相同问题的用户，我有这个解决方案对我来说是最好的，您也可以委托使用.on和一个共同的父级。

$（parent）.on（'click'、'.Like'，function（）{

和类似的for nother…，但是下面提供的其他解决方案可能更好：）@rlemon谢谢，如果您将其作为完整的代码编写，将非常有帮助，而不仅仅是对其他用户来说，他们将寻找相同的问题，我有这个解决方案，因为我是最好的解决方案