같은 시스템 트위터 스타일 버튼을 사용하는 방법

Question

나는 사용자가 다른 사용자의 게시물을 좋아할 수있는 시스템을 만들었습니다. 데이터가 내 DB에 삽입되었습니다. 내 유일한 문제는 게시물과 같은 사용자가 좋아하는 경우 버튼을 유지하는 방법에 대한 아이디어가 없었습니다. 사용자가 게시물을 좋아하고 페이지를 새로 고침/새로 고침 할 때도 마찬가지입니다.

내 단추의 기본 아이콘이 회색 인 것 같습니다. 사용자가 버튼을 가리키면 애니메이션이 실행되고 사용자가 마주 칠 때 빨간색으로 바뀌게됩니다. 그러나 사용자가 같은 버튼을 누르면 언제부터 내가 버튼을 ... 내가 메신저 뭔가가 생각하지만 난 그것을 어떻게 어떤 생각을 가지고 있겠지 회색으로 돌려 다시로드 페이지를 ..... 실행

CSS

.coracao{ 
background: url("https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png"); 
height: 50px; 
width: 50px; 
background-size: 2900%; 
background-position: left center; 

    top: -30px; 
    left: 0px; 
    position:absolute; 

} 
.coracao.ativo{ 
background: url("https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png"); 
height: 50px; 
width: 50px; 
background-size: 2900%; 
background-position: right center; 

    top: -30px; 
    left: 0px; 
    position:absolute; 
    animation: none 0s !important; 
    -moz-animation: none 0s !important; 

} 
.btn:hover .coracao{ 
animation: animationFrames 1.4s steps(28) infinite; 
} 

@keyframes animationFrames{ 
    100%{ 
background-position: -2800px ; 

    } 
} 

내가 내가 여기에 몇 가지 조건 난 그냥 사용자의 데이터를 삽입 할 경우 이 버튼

<div class="btn like"> 
    <div class="boxcoracao"> 
     <span class="coracao" name="like"><br>&emsp;&emsp;&emsp;Love</span> 
    </div> 
</div>&emsp;&emsp;&emsp; 

이것은 ... 무엇을해야하는지에 대한 어떤 생각을 가지고 있겠지을 할 필요가 있다고 생각하고 그 당신이 게시물의 모든 쿼리 할 때 포스트 ID

<script> 
$(".like").click(function(){ 
    if ($('.boxcoracao .coracao',this).toggleClass("ativo")){ 
    togglePost("like"); // run function 
    } else { 
    // update the text to show what the next click would be 
    togglePost("dislike"); // run function 
    } 

function togglePost(action){ 

    $.ajax({ 
     type: "post", 
     url: "", 
     data: "", 
     success: function(data){ 
      window.location.reload(); 
     }, 
     error: function(e){ 
     alert("please try again..."); 
     } 
     }); 
} 

}); 
</script> 

Answer 1

, 당신은 또한 같은 버튼의 내용을 설정 한 후 활성 사용자의 취향에 가입하고,에 의해 게시물의 상태 '처럼'을 당겨 필요 해당 플래그를 기반으로합니다.

저는 여러분의 예입니다. 페이지가로드 될 때 페이지를 처리 ​​할 PHP가 없습니다. 당신이 요구하는 것은 데이터베이스의 내용을 기반으로 페이지의 출력을 처리하는 서버 측 스크립트를 사용하는 경우에만 가능할 수있는 기능입니다.

연구 PHP 웹 응용 프로그램. 순수한 JS, HTML 및 CSS에서는이를 달성 할 수 없습니다.