После нажатия кнопки сохранить в MySQL, затем отобразить выделение CSS

Question

У меня есть функция Rating, которая делает следующее: Как только пользователь нажимает кнопку +1, рейтинг увеличивается на 1 и сохраняется в MySQL. То, что я хотел бы сделать, это нажать один раз, он изменит фон на другой цвет, как показано ниже.

(То, что я хотел бы сделать, это «раз щелкнуть») на в текущий момент он просто обновляет номер с белым фоном)

ПРИМЕЧАНИЕ: Я просто прошу предложения или каким-то образом привести меня в правильном направлении, спасибо заранее.

Без щелкнул:

После нажатия:

PHP/HTML форму: подать +1

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

AJAX: обновить кнопка

$(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: отправить из Аякса

$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

В вашем успехе обратного вызова, то почему бы не просто установить класс к parent, а затем обновить .wrapper?

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

Когда пользователь обновляет страницу, и вы хотите продолжать показывать синий, вы бы просто:

<?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> 

Answer 2

Прежде всего, вы не можете иметь имя класса с пробелом в ней - он будет интерпретироваться как два класса, до и .

В PHP вы можете эхо что-то вдоль линий (обязательно установите DATATYPE в JSON)

echo(json_encode(array("success"=>true))); 
exit(); 

После чего JQuery может обрабатывать ответ:

function(result) { 
    var result_string = jQuery.parseJSON(result); 
    if(result_string.success) { 
     $(this).children(".wrapper").css("background-color", "blue") 
    } 
} 

Answer 3

Вы можете изменить функция успеха добавить цвет с .css («background-color», «blue») или если вы хотите, чтобы он всегда был синим, если vote_counter выше, чем вы можете добавить это в начало своего кода:

if (parseInt($("#"+id).children(".wrapper").text()) >= 1) { 
$("#"+id).children(".wrapper").css("background-color","blue"); 
}