클릭 후 JS가 표시되지 않습니다.

Question

이 JS 코드는 내 웹 사이트의 일부 기사와 비슷하거나 비슷하지 않습니다. 매우 미세한 이 문제는입니다. i 클릭하면 보이지 않는 것과 달리 다시 좋아해요. 표시되지 않고 텍스트와 달라 붙는 것 같아요. 다시 클릭과 비슷합니다. 페이지를 새로 고친 후에 다시 작동합니다.
두 번 클릭해도 텍스트가 표시되지 않지만 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').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 2

아약스 콜백에서 클래스와 텍스트를 변경해야합니다! 나는 그것이 당신의 문제를 해결할 지 모르겠지만, 적어도 이것은 이런 식으로해야합니다.

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

Answer 3

안녕 유세프 아주 잘 작동하고 당신이 시도 할 수 있습니다 자신의 토글 기능을 작성이

"좋아요"

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

    }); 
});