0

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

当前情况如下：一旦我按下（ +0 ​​）按钮，它会调用 ajax 并将其更新为（ +1 ）在这种情况下，背景从正常的白色变为蓝色背景色由 AJAX FORM 上的 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]（颜色：白色；背景：蓝色；）

如果我单击[+1]按钮删除我的评分，那么它会变成[+0]（颜色：黑色；背景：白色；）。唯一的问题是保存，如果我单击它，它将保持白色和蓝色背景。

4

1 回答 1

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>
于 2013-07-04T02:09:32.643 回答