使用AJAX切换类似按钮颜色
使用AJAX切换类似按钮颜色
提问于 2019-09-21 12:26:40
点击一个帖子下面的“喜欢”按钮。如果它被点击，它会变成橙色，否则它就是绿色的。我不能让颜色切换。如何使用从MySQL数据库查询数据的AJAX请求来完成此操作？
我尝试过使用jQuery修改css文件，方法是使用切换属性。我还尝试查询数据库，看看用户是否喜欢这篇文章，并将结果设置为一个变量，以便在AJAX函数(Data)中使用。
注意：为了简化演示，删除了防止黑客攻击的代码。
索引php文件：
<?php
$userid = session_id();
$query = "SELECT * FROM posts";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result)){
$postid = $row['id'];
$title = $row['title'];
$content = $row['content'];
// Checking user status
$status_query = "SELECT count(*) as type FROM likes WHERE userid='".$userid. "'" . "and postid=".$postid;
$status_result = mysqli_query($con,$status_query);
$status_row = mysqli_fetch_array($status_result);
$type = $status_row['type'];
// Count post total likes and unlikes
$like_query = "SELECT COUNT(*) AS cntLikes FROM likes WHERE postid=".$postid;
$like_result = mysqli_query($con,$like_query);
$like_row = mysqli_fetch_array($like_result);
$total_likes = $like_row['cntLikes'];
?>
<div class="post">
<h1><?php echo $title; ?></h1>
<div class="post-text">
<?php echo $content; ?>
</div>
<div class="post-action">
<input type="button" value="Like" id="like_<?php echo $postid . "_" . $userid; ?>" class="like" style="<?php if($type == 1){ echo "color: #ffa449;"; } ?>" /> (<span id="likes_<?php echo $postid . "_" . $userid; ?>"><?php echo $total_likes; ?></span>)
</div>
</div>
<?php
}
?>
</div>
</body>Ajax jQuery：
$(".like").click(function(){
var id = this.id; // Getting Button id
var split_id = id.split("_");
var postid = split_id[1];
var userid = split_id[2];
// AJAX Request
$.ajax({
url: 'likeunlike.php',
type: 'post',
data: {postid:postid,userid:userid},
dataType: 'json',
success: function(data){
var likes = data['likes'];
var type = data['type'];
$("#like_" + postid + "_" + userid).text(likes);
if(type == 1){
$("#likes_" + postid + "_" + userid).css("color","#ffa449");
}
if(type == 0){
$("#likes_" + postid + "_" + userid).css("color","lightseagreen");
}
}
});
});调用php文件：
$postid = $_POST['postid'];
$userid = $_POST['userid'];
// Check entry within table
$query = "SELECT COUNT(*) AS cntpost FROM likes WHERE postid=".$postid." and userid='".$userid . "'";
$result = mysqli_query($con,$query);
$fetchdata = mysqli_fetch_array($result);
$count = $fetchdata['cntpost'];
if($count == 0){
$insertquery = "INSERT INTO likes(userid,postid) values('".$userid."',".$postid.")";
mysqli_query($con,$insertquery);
}else {
$updatequery = "DELETE FROM likes where userid='" . $userid . "'" . " and postid=" . $postid;
mysqli_query($con,$updatequery);
}
// count numbers of likes in post
$query = "SELECT COUNT(*) AS cntLike FROM likes WHERE postid=".$postid;
$result = mysqli_query($con,$query);
$fetchlikes = mysqli_fetch_array($result);
$totalLikes = $fetchlikes['cntLike'];
$return_arr = array("likes"=>$totalLikes,"type"=>$count);
echo json_encode($return_arr);回答 1
Stack Overflow用户
回答已采纳
发布于 2019-09-22 15:38:43
对jQuery文件进行了如下修改。jQuery之前没有命中正确的标签。我也在使用Safari，需要清除缓存才能看到修改后的页面更改。糟了。新手。
$("#like_" + postid + "_" + userid).text(likes);
if(type == 1){
$("#likes_" + postid + "_" + userid).css("color","#ffa449");
}
if(type == 0){
$("#likes_" + postid + "_" + userid).css("color","lightseagreen");
}至：
$("#likes_" + postid + "_" + userid).text(likes);
if(type == 1){
$("#like_" + postid + "_" + userid).css("color","lightseagreen");
}
if(type == 0){
$("#like_" + postid + "_" + userid).css("color","#ffa449");
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58040263
复制相关文章
相似问题
腾讯云开发者
