php - 使用 jQuery 制作类似 Gmail Star 的书签

Question

我正在尝试使用 jQuery 创建一个类似星形的书签。不幸的是，我所拥有的只能以一种方式工作。这意味着如果一个链接未加星标，那么它会成功加星标，但如果一个链接已经加星标并且我想取消它，那么星标图像会从页面中完全消失，但是在后端它确实可以工作，但在前端星标图像完全消失。

我的 HTML 中有以下内容:

require_once('connection.inc.php');
$con = dbConnect('read');
$sql = "SELECT * FROM trn_bookmark";
$result = $con->query($sql) or die(mysqli_error());
while($row = $result->fetch_assoc()) {
    $className  = "star";
    if($row['bookmark_flag'] == 'Y'){
        $className = "favorited";
    }
    echo '<div id="'.$row['bookmark_id'].'"><a href="javascript:void(0);" class="'.$className.'"></a> <span>'.$row['bookmark_desc'].'</span></div>';
}

CSS:

.star {
background-color: transparent;
background-image: url('star-off.png');
background-repeat:no-repeat;
display: block;  
height:16px;
width:16px;
float:left;
}
.favorited {
 text-indent: -5000px;
background-color: transparent;
background-image: url('star-on.png');
background-repeat:no-repeat;   
height:16px;
width:16px;
float:left;
}

JavaScript 函数是这样的:

$(document).ready(function(){   
 $('.star,.favorited').click(function() {
        var id = $(this).parents('div').attr('id');             
        var className = $(this).attr('class');
        var flag  = (className=='star') ? 'Y':'N';
        var $this = $(this);
        $.ajax({
                type: "post",
                url: "conversation.php",
                cache: false,               
                data:{'bookmarkId': id,'flag':flag},
                success: function(response){
                    if(response=='true'){                               
                        $this.toggleClass("favorited");
                    }   
                },
                error: function(){                      
                    alert('Error while request..');
                }
             });
  });
});

还有对话.php:

$bookmarkId = $_POST['bookmarkId'];
$flag = $_POST['flag'];
require_once('connection.inc.php');
$con = dbConnect('read');
$stmt = $con->stmt_init();
$sql = "UPDATE trn_bookmark SET bookmark_flag = ? WHERE bookmark_id = '$bookmarkId'";
    if ($stmt->prepare($sql)) {
        $stmt->bind_param('s', $flag);
        $done = $stmt->execute();
    }

    echo 'true';

我已经上传了它，以便您可以实时看到正在发生的事情。您可以通过此链接查看发生的情况:http://www.rytenet.com/starrating/index.php

Answer 1

试试这个

当页面加载时，如果星星是最喜欢的，它会存储 $className = "favorited"而不是 className="star favorited"

while($row = $result->fetch_assoc()) {
    $className  = "star";
    if($row['bookmark_flag'] == 'Y'){
        $className .= " favorited";
    }
    echo '<div id="'.$row['bookmark_id'].'"><a href="javascript:void(0);" class="'.$className.'"></a> <span>'.$row['bookmark_desc'].'</span></div>';
}