使用jquery在php中单击活动或非活动时如何更改颜色答案

【问题标题】：How to change color when click active or inactive in php using jquery使用jquery在php中单击活动或非活动时如何更改颜色
【发布时间】：2018-07-31 05:00:43
【问题描述】：

当我点击活动和非活动时，我想改变<i>标签的颜色

我的 ajax 代码

$('.factive').click(function(){
    var factiveId = $(this).attr('id');
    $.post('controller/ajax-product-active.php?factiveId='+factiveId,
    {},function(data)
    {  
        $('#product-active').html(data);
    });
});

ajax-product-active.php

if ($csrow['status']=='Active') {
    $update_status = mysqli_query($conn,"update products set status = 'Deactive' where id = '{$factiveId}'");

    echo "<a id='$csrow[id]' class='factive' style='cursor: pointer;'  onclick='productActive($csrow[id])'>
        <i class='fa fa-circle pactive' aria-hidden='true'style='color:red' title='Deactive'></i></a>";

}elseif ($csrow['status']=='Deactive') {

    $update_status = mysqli_query($conn,"update products set status = 'Active' where id = '{$factiveId}'");

    echo "<a id='$csrow[id]' class='factive' style='cursor: pointer;'  onclick='productActive($csrow[id])'>
        <i class='fa fa-circle pactive' aria-hidden='true'style='color:#12bc00' title='Active'></i></a>";
}

此代码运行成功，但颜色仅首先更改。是否点击任意标签

【问题讨论】：

建议在 CSS 中执行此操作或添加一个类。
这已经在这里检查了：stackoverflow.com/questions/16598213/…
亲爱的先生，如何在ajax中添加类请帮忙
添加当前有问题的 html 代码
你从哪里得到$csrow['status']？

标签： php jquery ajax mysqli

【解决方案1】：

当您单击活动元素时，您必须获取当前值（活动，去活动）并相应地更改类

$('.factive').click(function(){
    var currentVal = $(this).find('i').attr('title');
    var addCls = 'active';
    var removeCls = 'deactive';
    var title = 'Active';
    if(currentVal == 'Active'){
      addCls = 'deactive';
      removeCls = 'active';
      title = 'Deactive';
    }
    $(this).find('i').addClass(addCls).removeClass(removeCls);
    $(this).find('i').attr('title',title);
    $(this).find('i').text(title);
	});

.active{color:#12bc00}
.deactive{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id='1' class='factive active' style='cursor: pointer;'>
  <i class='fa fa-circle pactive' aria-hidden='true'	title='Active'>Active</i>
  
<a id='2' class='factive deactive' style='cursor: pointer;'>
  <i class='fa fa-circle pactive' aria-hidden='true'	title='Deactive'>Deactive</i>
</a>

【讨论】：

【解决方案2】：

在处理 AJAX 请求时，我使用的规则是将后端到客户端之间传输的所有数据转换为 JSON。因此，PHP 将以 JSON 格式发送其响应，而 JS 将期望返回一个 JSON 对象。话虽如此，让我们以这种方式修改您的 HTML/CSS/JS（注意：我排除了所有不相关的信息）：

<style>
    .product {
        color: red
    }

    .product.active {
        color: green;
    }
</style>

<a href="#" class="product">
    <i class="fa fa-circle"></i>
</a>

<script>
    $('.product').click(function (e) {
        e.preventDefault();
        var $link = $(this);
        var id = $link.attr('id');

        $.ajax({
            url: 'controller/ajax-product-active.php',
            type: 'post',
            dataType: 'json',
            data: {productId: id},
            success: function (data) {
                if (data.active) {
                    $link.addClass('active');
                } else {
                    $link.removeClass('active');
                }
            }
        });
    });
</script>

在上述修改中，我将您的链接称为.product，因为这对我来说最有意义，因为“产品”可以是“活跃的”或“不活跃的”。在 JS 中，我将您的 $.post 更改为 $.ajax 以添加 dataType: 'json' 选项，告诉它预期的响应应该是 JSON。我们预计回报类似于{"active":"true"} 或{"active":"false"}。基于此，我们向.product 元素添加或删除.active 类。根据类，相应地应用 CSS。

在 PHP 方面，我们需要做这样的事情（同样，我只包括相关代码。$status 与您提供的$csrow['status'] 相同）：

$response = [];
if ($status === 'Active') {
   $result = mysqli_query($conn, "update products set status = 'Deactive' where id = '{$factiveId}'");
   $response['active'] = false;
} elseif ($status === 'Deactive') {
   $result = mysqli_query($conn, "update products set status = 'Active' where id = '{$factiveId}'");
   $response['active'] = true;
}
header('Content-Type: application/json');
echo json_encode($response);

请注意，我们正在构建 $response 数组，然后将其作为 JSON 返回给 JS。

试试这个结构，它会让你的代码更简洁，并为你准备一个 RESTful 架构。

【讨论】：