AJAX、PHP、PDO、HTML、および CSS で動作する次のコードがあります。その機能は、MySQL に +1 を追加するか、MySQL から -1 を取得することによって、AJAX 投稿のデータベースに送信する評価ボタンです。Facebook の「いいね」のような通常の評価システムです。
現在の状況は次のとおりです: ( +0 ) ボタンを押すと、ajax が呼び出されて ( +1 ) に更新されます。その場合、背景は通常の白色から青色の背景色に変更されます。 AJAX FORM の toggleClass によって追加されました。私が抱えている問題は、ページを更新すると背景だけが保存され、プラスとレートカウントが通常の色に戻ることです。私がやろうとしているのは、現在 +0 にあるボタンを押してフォントの色を暗くすると、白い色に切り替わり、ページを更新したらそこにとどまることです。数人の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]に変わります(色:黒;背景:白;) . 唯一の問題は、クリックすると白と青の背景のままになることを保存することです。