Question

我有这个JS代码，它与我网站上的某些文章不同。问题是，当我点击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

嗨优素福你可以试试这个

“赞”

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

  });
});

Answer 2

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

改为创建自己的切换功能

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

Answer 3

你应该在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');
           }
         });
    });

单击两次后JS不显示文本

3 个答案: