Jquery가 여러 개의 동일한 클래스로 콘텐츠 수정

Question

나는 내 웹 사이트에 간단한 '좋아요'서비스를 구축하고 있습니다. 사용자가 링크를 클릭하여 무언가를 좋아할 수있게하고 싶습니다. (PHP 스크립트에서 반환 된) 총 좋아요를 받으십시오.

스크립트에서 데이터를 업데이트하는 데 문제가 있습니다. 이것은 내가 가지고있는 것입니다 :

<div id="112" class="like">Like it</div> 
<div id="113" class="like">Like it</div> 
<div id="114" class="like">Like it</div> 

<script> 
$(".like").click(function() { 
var idl = $(this).attr("id"); 
$.ajax({type:"POST", data: likeid=idl, url:"ajax/publike.php", 
      success: function(data){ 
       $(this).html(data); 
      }, 
         error: function(){ 
        alert ("Error"); 
      } 
     }); 
     return false; 
}); 
</script> 

저는 (데이터)에서 얻은 내용으로 div를 업데이트하려고하지만 업데이트하지 않습니다. $(".like").html(data);으로 변경하면 작동하지만 많은 클래스가 있습니다. 업데이트 할 클릭 한 div 만 사용해야합니다.

Answer 1

당신이 AJAX 호출을 할 때이

<script> 
    $(".like").click(function() { 
    var idl = $(this).attr("id"); 
    $.ajax({type:"POST", data: likeid=idl, url:"ajax/publike.php", 
       success: function(data){ 
        $('#'+idl).html(data); 
       }, 
          error: function(){ 
         alert ("Error"); 
       } 
      }); 
      return false; 
    }); 
    </script> 

Answer 2

는이 작업을 수행

감사하십시오 AJAX 콜백이 실행되는 시간으로

<script> 

$(".like").click(function() 
{ 
    var idl = $(this).attr("id"); 

    var link = $(this); 

    $.ajax({type:"POST", data: likeid=idl, url:"ajax/publike.php", 
    success: function(data) 
    { 
     link.html(data); 
    }, 
    error: function() 
    { 
     alert ("Error"); 
    }}); 

    return false; 
}); 

</script> 

Answer 3

는 this 이벤트를 트리거 한 요소로 범위가 더 이상 없습니다. 당신은에 대한 참조를 유지해야합니다

$(".like").click(function() { 
    var likedElement = $(this); 
    var idl = $(this).attr("id"); 
    $.ajax({type:"POST", data: likeid=idl, url:"ajax/publike.php", 
     success: function(data){ 
      likedElement.html(data); 
     }, 
     error: function(){ 
      alert ("Error"); 
     } 
    }); 
    return false; 
}); 

Answer 4

이 요소에 대한 컨텍스트를 설정하려고합니다. 이는 스코프 변수를 사용하는 것보다 안전합니다. 첫 번째 아약스 호출이 반환되기 전에 두 번째 div를 클릭하면 마지막 divs 만 업데이트됩니다. 이 방법은 두 div를 모두 올바르게 업데이트합니다.

<script> 
$(".like").click(function() { 

var div$ = $(this); 

$.ajax({type:"POST", data: likeid=div$.attr("id"), url:"ajax/publike.php", context: div$, 
      success: function(data){ 
       this.html(data); 
      }, 
         error: function(){ 
        alert ("Error"); 
      } 
     }); 
     return false; 
}); 
</script>