1

我有一个 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：从 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'];
}
4

3 回答 3

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>
于 2013-07-03T20:32:15.270 回答
0

首先，你不能有一个包含空格的类名——它将被解释为两个类，up和vote。

在 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")
    }
}
于 2013-07-03T20:36:20.550 回答
0

您可以更改成功函数以使用 .css("background-color","blue") 添加颜色，或者如果您想让它始终为蓝色，如果 vote_counter 高于您可以将其添加到代码的顶部：

if (parseInt($("#"+id).children(".wrapper").text()) >= 1) {
 $("#"+id).children(".wrapper").css("background-color","blue");
}
于 2013-07-03T20:40:25.730 回答