使用 AJAX 切换按钮颜色答案

【问题标题】：Toggle Like Button Colour using AJAX使用 AJAX 切换按钮颜色
【发布时间】：2020-01-22 05:09:09
【问题描述】：

在帖子下方点击了一个赞按钮。如果点击它会变成橙色，否则它是绿色的。我无法切换颜色。如何通过 AJAX 请求从 MySQL 数据库中查询数据？

我尝试使用 jQuery 来修改 css 文件，使用 toggle 属性。我还尝试查询数据库以查看用户是否喜欢该帖子并将该结果设置为要在 AJAX 函数（数据）中使用的变量。

注意。为简化演示，删除了防止黑客攻击的代码。

索引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;"; } ?>" />&nbsp;(<span id="likes_<?php echo $postid . "_" . $userid; ?>"><?php echo $total_likes; ?></span>)&nbsp;

                    </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);

【问题讨论】：

@Dharman 感谢您的评论。我在问题正文中提到，为了示例代码的简单性，已将其删除。
@Dharman 不用担心，我理解。道歉。正如你所猜测的那样，我是新手。像许多人一样，我从互联网上的一个示例中获取了代码。它有喜欢和不喜欢的按钮，我设法将 session_id 集成为用户 ID，这适用于我想要它做的事情。我正在努力改变like按钮的颜色。是的，你是对的，代码中没有准备好的语句，但我确实/确实打算添加它们。我的想法是在查看代码之前，我想让代码在基本级别上运行。就我个人而言，这是一种更容易学习的方法。你能帮忙吗？
你的like按钮有id=like_...但是在你的ajax代码中你有$("#likes_...我认为这是错字你有额外的s同时提到id删除它应该工作.
@Swati 谢谢。我认为like id与输入标签相关，而likes id与span标签相关。所以我试图改变like标签的颜色，这样我就可以在点击“Like”这个词时改变它的颜色。感谢您的帮助。
你从 ajax 中的 php 得到什么响应？尝试打印即console.log(data); 并检查一次。

标签： php mysql ajax

【解决方案1】：

修改了 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"); 
                }

【讨论】：