单击按钮后，保存到MySQL然后显示CSS高亮显示

Question

I've got a Rating function that does as follows: Once a user clicks the +1 button, the rating goes up by 1, and saves to MySQL. What I'd like for it to do is once clicked, it changes the background to a different color as shown below..

( What I'd like for it to do is the "once clicked" ) at the current moment it just updates the number with the background being white)

NOTE: I'm just asking for suggestions or some way to lead me in the right direction, thank you in advance.

Without being clicked:

Once clicked:

php/html form: to submit the +1

<div class="up vote" name="voteUp" id="<?php echo $post_iD;?>">
    <div class="wrapper">+<?php echo $VoteRate;?></div>
</div>

AJAX: to update the button

$(function()
{
    $(".vote").click(function()
    {
        var id = $(this).attr("id");
        var name = $(this).attr("name");
        var dataString = 'id='+ id ;
        var parent = $(this);

        if (name=='voteUp')
        {
            $.ajax(
            {
                type: "POST",
                url: "voting/up_vote.php",
                data: dataString,
                cache: false,
                success: function(html)
                {
                    parent.html(html);
                }
            });
        }
        return false;
    });
});

up_vote.php: submit from the ajax

$ip = $_SERVER['REMOTE_ADDR']; 
if($_POST['id'])
{
    $sth = $db->prepare("SELECT add_iP FROM PostsRating WHERE post_iD_fk = :id AND add_iP = :ip");
    $sth->execute(array(':id' => $_POST['id'], ':ip' => $ip));

    if( $sth->fetchColumn() == 0)
    {
            $sth = $db->prepare("UPDATE posts set voteUp = voteUp+1 where post_iD = :id");
            $sth->execute(array(':id' => $_POST['id']));

            $sth = $db->prepare("INSERT into PostsRating (post_iD_fk, add_iP) VALUES (:id, :ip)");
            $sth->execute(array(':id' => $_POST['id'], ':ip' => $ip));
    } else  {
            $sth = $db->prepare("UPDATE posts set voteUp = voteUp-1 where post_iD = :id");
            $sth->execute(array(':id' => $_POST['id']));

            $sth = $db->prepare("DELETE FROM PostsRating WHERE post_iD_fk = :id AND add_iP = :ip");
            $sth->execute(array(':id' => $_POST['id'], ':ip' => $ip));
    }

    $sth = $db->prepare("SELECT voteUp FROM posts WHERE post_iD = :id");
    $sth->execute(array(':id' => $_POST['id']));

    $row = $sth->fetch();   

    echo $row['voteUp'];
}

Answer 1

In your success callback, why not just set a class to the parent and then update the .wrapper?

success: function(html)
{
    parent.addClass("blue");
    parent.find(".wrapper").html("+ " + html);
}

When the user refreshes the page and you want to continue to show the blue, you would simply:

<?php
$ip = $_SERVER['REMOTE_ADDR']; 
$sth = $db->prepare("SELECT add_iP FROM PostsRating WHERE post_iD_fk = :id AND add_iP = :ip");
$sth->execute(array(':id' => $post_iD, ':ip' => $ip));
$class = ($sth->fetchColumn()) ? " blue" : "";
?>
<div class="up vote<?php echo $class; ?>" name="voteUp" id="<?php echo $post_iD;?>">
    <div class="wrapper">+<?php echo $VoteRate;?></div>
</div>