前端交互优化：利用jQuery和CSS类实现DOM元素状态的高效管理

<i class="bi bi-heart<?= $liked ? "fill" : "" ?> ms-3" data-id="<?php echo $row['image_id'] ?>" style="cursor:pointer"></i>

$(".bi").on("click", function(e) {
  // ... 事件处理逻辑 ...
});

$(".bi").on("click", function(e) {
  const $this = $(this); // 缓存当前点击的jQuery对象
  const imageId = $this.data("id"); // 从data-id属性获取图片ID
  const isLiked = $this.hasClass("bi-heart-fill"); // 判断当前是否已点赞

  $.post("functions/toggleLikes.php", { id: imageId, liked: isLiked }, function() {
    // 请求成功后的回调函数
    // ... 前端状态更新逻辑 ...
  });
});

$(".bi").on("click", function(e) {
  const $this = $(this);
  const imageId = $this.data("id");
  let isLiked = $this.hasClass("bi-heart-fill"); // 使用let，因为我们会在回调中修改它

  $.post("functions/toggleLikes.php", { id: imageId, liked: isLiked }, function() {
    // 请求成功后，反转前端的isLiked状态
    isLiked = !isLiked;
    // 根据新的isLiked状态切换CSS类
    $this.toggleClass("bi-heart-fill", isLiked); // 如果isLiked为true，添加bi-heart-fill；否则移除
    $this.toggleClass("bi-heart", !isLiked);     // 如果isLiked为false，添加bi-heart；否则移除
  });
});

<!-- 假设 $row['image_id'] 为 123，且当前未点赞 ($liked 为 false) -->
<i class="bi bi-heart ms-3" data-id="123" style="cursor:pointer"></i>

<!-- 假设 $row['image_id'] 为 456，且当前已点赞 ($liked 为 true) -->
<i class="bi bi-heart-fill ms-3" data-id="456" style="cursor:pointer"></i>

$(document).ready(function() {
    // 为所有具有 'bi' 类的元素绑定点击事件
    $(".bi").on("click", function(e) {
        const $this = $(this); // 缓存当前点击的jQuery对象
        const imageId = $this.data("id"); // 从data-id属性获取图片ID
        let isLiked = $this.hasClass("bi-heart-fill"); // 判断当前是否已点赞

        // 发送AJAX POST请求到后端
        $.post("functions/toggleLikes.php", { id: imageId, liked: isLiked }, function(response) {
            // 请求成功后的回调函数
            // 假设后端成功处理并返回了成功状态
            // 在实际应用中，你可能需要检查response来确认操作是否真的成功

            // 反转前端的isLiked状态
            isLiked = !isLiked;

            // 根据新的isLiked状态切换CSS类
            // 如果isLiked为true，添加bi-heart-fill；否则移除
            $this.toggleClass("bi-heart-fill", isLiked);
            // 如果isLiked为false，添加bi-heart；否则移除
            $this.toggleClass("bi-heart", !isLiked);

            console.log("点赞状态已更新，当前状态：", isLiked ? "已点赞" : "未点赞");
        }).fail(function(jqXHR, textStatus, errorThrown) {
            // AJAX请求失败时的处理
            console.error("更新点赞状态失败:", textStatus, errorThrown);
            // 可以给用户一个提示，例如：alert("操作失败，请稍后再试。");
        });
    });
});

<?php
// 这是一个简化的后端示例，实际应用中需要进行数据库操作和安全验证

header('Content-Type: application/json'); // 声明返回JSON数据

$response = ['success' => false, 'message' => ''];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $imageId = $_POST['id'] ?? null;
    $isLiked = $_POST['liked'] ?? null; // 前端发送的是当前状态

    if ($imageId !== null && $isLiked !== null) {
        // 在这里执行数据库操作，更新对应 imageId 的点赞状态
        // 示例：
        // $db = new PDO(...);
        // if ($isLiked) {
        //     // 如果前端发送的是已点赞，则表示要取消点赞
        //     $stmt = $db->prepare("DELETE FROM likes WHERE image_id = ? AND user_id = ?");
        // } else {
        //     // 如果前端发送的是未点赞，则表示要点赞
        //     $stmt = $db->prepare("INSERT INTO likes (image_id, user_id) VALUES (?, ?)");
        // }
        // $stmt->execute([$imageId, $_SESSION['user_id']]); // 假设有用户ID

        $response['success'] = true;
        $response['message'] = '点赞状态更新成功';
    } else {
        $response['message'] = '缺少必要的参数。';
    }
} else {
    $response['message'] = '只接受POST请求。';
}

echo json_encode($response);
exit;
?>