好きなシステムのtwitterスタイルボタンを正しく使うには

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 Webアプリケーション。これは、純粋なJS、HTML、およびCSSでは達成できません。