php - 在 AJAX SUCCESS 上更改并保存 SPAN CSS，然后检索保存的信息

Question

我有以下适用于 AJAX、PHP、PDO、HTML 和 CSS 的代码。它的功能是评级按钮，通过向 MySQL 添加 +1 来发送到 AJAX 帖子上的数据库或从中取-1，只是一个普通的评级系统，如 Facebook 的“点赞”。

当前情况如下:一旦我按下(+0)按钮，它就会调用ajax并将其更新为(+1)，在这种情况下，背景从正常的白色更改为蓝色背景颜色是由 AJAX 表单上的toggleClass 添加的。我遇到的问题是，刷新页面后，只有背景会保存，并且 plus 和rateCount 返回到它正常颜色。我想做的就是一旦按下当前处于 +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](color:black;background:white;) 如果未单击，则处于待机状态。

如果我点击按钮，它会变成[+1](color:white;background:blue;)

如果我点击[+1]按钮删除我的评分，那么它会变成[+0](color :黑色；背景:白色；)。唯一的问题是，如果我点击它，它将保持白色和蓝色背景。

Answer 1

这会将类添加到 plus和rateCount跨度类似于 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>