變化與保存SPAN CSS在AJAX SUCCESS然後檢索保存的信息

Question

我有下面的代碼與AJAX，PHP，PDO，HTML和CSS的作品。它的功能是排行榜的按鈕，通過添加一個+1到MySQL 或採取-1從它，只是一個正常的評級體系，如Facebook的「Like」發送到數據庫的AJAX崗位。

當前情況如下：一旦我按下（+0）按鈕，它會調用ajax並將其更新爲（+1），在這種情況下，背景從普通白色 更改爲由AJAX FORM上的toggleClass添加的藍色背景色。說我遇到的問題是，一旦我刷新頁面僅後臺保存，並加上和rateCount返回到它的正常 顏色。所有我想要做的是，一旦我按的是目前爲+ 0用深色字體顏色按鈕，我想爲它swicth變成白色，一旦我刷新 網頁我希望它呆在那裏。下面是我在幾個SO用戶的幫助下做的。

注：$ voterate返回從MySQL喜歡的總數。

---

.up { -moz-user-select: none; background-color: #FFFFFF; background-image: none; border: 1px solid #DDDDDD; border-radius: 3px 3px 3px 3px;box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); cursor: pointer; float: left; height: 28px; line-height: 26px; margin-left: 10px; outline: medium none; padding: 0 10px; transition: background-color 0.218s ease 0s, border-color 0.218s ease 0s, box-shadow 0.218s ease 0s; width: auto;} 
.up:hover{ border-color: #BFBFBF; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);} 
.up.clicked { background-color: #427FED;background-image:-moz-linear-gradient(center top , transparent, transparent); border: 1px solid transparent;} 
.clicked:hover{ -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: #4285F4; background-image: -moz-linear-gradient(center top , transparent, transparent); border-color: transparent transparent #2F69C2; border-image: none; border-style: solid; border-width: 1px; box-shadow: 0 -1px 0 #2F69C2 inset;} 

.plus { color: #696969; font-family: Segoe UI; font-size: 16px; font-weight: bold;} 
.plus.PlusWhiteButton { color:#fff;} 

.rateCount { color: #696969; font-size: 15px; font-weight: bold;} 
.rateCount.RateCountWhiteButton { color:#fff;} 

---

<?php 
    $ip = $_SERVER['REMOTE_ADDR']; 
    $sth = $db->prepare("SELECT add_iP FROM PostsRating WHERE post_iD_fk = :post_iD AND add_iP = :ip"); 
    $sth->execute(array(':post_iD' => $post_iD, ':ip' => $ip)); 
    $clicked = ($sth->fetchColumn()) ? " clicked" : ""; // i'm confuse on how this get's the clicked class, it seems really inneficient but it works one way or another. 
?> 
<span class="up vote<?php echo $clicked;?>" name="voteUp" id="<?php echo $post_iD;?>"> 
    <span class="plus">+</a> 
    <span class="rateCount"><?php echo $VoteRate;?></a> 
</span> 

---

$(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.toggleClass("clicked"); // clicked function changes the background and is the only one that actually stays once the page is refreshed. 
        parent.find(".rateCount").html(html); 
        parent.find(".rateCount").toggleClass("RateCountWhiteButton"); 
        parent.find(".plus").toggleClass("PlusWhiteButton"); 
       } 
      }); 
     } 
     return false; 
    }); 
}); 

，這裏是我如何增加從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']; 
} 

我不知道如果我解釋清楚，任何人都可以這樣理解這又是更清晰。

[+0] （顏色：黑色;背景：白色;）待機如果沒有點擊。

，如果我按一下按鈕就變成[+1] （顏色：白色;背景：藍色;）

如果我點擊[+1]按鈕刪除我的評價那麼它變成[+ 0] （顏色：黑色;背景：白色;）。 唯一的問題是保存，如果我點擊它然後它將保持白色和藍色的背景。

Answer 1

這會將和rateCount的等級類別添加到up範圍，類似於將clicked類添加到up範圍的方式。

<?php 
    $ip = $_SERVER['REMOTE_ADDR']; 
    $sth = $db->prepare("SELECT add_iP FROM PostsRating WHERE post_iD_fk = :post_iD AND add_iP = :ip"); 
    $sth->execute(array(':post_iD' => $post_iD, ':ip' => $ip)); 
    $clicked = $pluswhite = $ratewhite = ''; 
    if ($sth->fetchColumn()) { 
     $clicked = " clicked"; 
     $pluswhite = " PlusWhiteButton"; 
     $ratewhite = " RateCountWhiteButton"; 
?> 
<span class="up vote<?php echo $clicked;?>" name="voteUp" id="<?php echo $post_iD;?>"> 
    <span class="plus<?php echo $pluswhite;?>">+</a> 
    <span class="rateCount<?php echo $ratewhite;?>"><?php echo $VoteRate;?></a> 
</span>