当我在php jquery中激活和停用产品时，活动和停用中的jquery问题会更改颜色

在PHP和jQuery中处理产品的激活和停用状态，并通过jQuery更改相应元素的样式，涉及前端和后端的交互。以下是这个过程的基础概念和相关细节：

基础概念

PHP：一种服务器端脚本语言，用于处理数据和生成HTML页面。
jQuery：一个JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。
Ajax：异步JavaScript和XML，允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。

应用场景

电商网站：管理商品的上下架状态。
管理系统：如库存管理系统中的产品启用和禁用功能。

实现步骤

后端（PHP）

创建一个处理激活和停用请求的PHP脚本，例如toggle_product_status.php：

<?php
// 假设有一个数据库连接 $db
$product_id = $_POST['product_id'];
$action = $_POST['action']; // 'activate' 或 'deactivate'

// 根据$action更新数据库中的产品状态
if ($action == 'activate') {
    // 更新产品为激活状态的SQL语句
    $sql = "UPDATE products SET status = 'active' WHERE id = ?";
} else if ($action == 'deactivate') {
    // 更新产品为停用状态的SQL语句
    $sql = "UPDATE products SET status = 'inactive' WHERE id = ?";
}

$stmt = $db->prepare($sql);
$stmt->bind_param("i", $product_id);
$stmt->execute();

echo json_encode(['success' => true, 'status' => $action]);
?>

前端（jQuery）

使用jQuery发送Ajax请求，并根据响应更新UI：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('.toggle-status').click(function() {
        var productId = $(this).data('product-id');
        var action = $(this).data('action');
        
        $.ajax({
            url: 'toggle_product_status.php',
            type: 'POST',
            data: { product_id: productId, action: action },
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    // 根据响应更新按钮颜色
                    if (action == 'activate') {
                        $('#' + productId).removeClass('inactive').addClass('active');
                    } else if (action == 'deactivate') {
                        $('#' + productId).removeClass('active').addClass('inactive');
                    }
                } else {
                    alert('Failed to update product status.');
                }
            },
            error: function() {
                alert('An error occurred while processing your request.');
            }
        });
    });
});
</script>

<style>
.active { background-color: green; }
.inactive { background-color: red; }
</style>

<!-- 示例按钮 -->
<button class="toggle-status" data-product-id="123" data-action="activate">Activate</button>
<button class="toggle-status" data-product-id="123" data-action="deactivate">Deactivate</button>