Question

当我单击有效和无效按钮时，我想更改<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>";
}

此代码成功运行，但颜色仅在第一时间更改。是否点击任何标签

Answer 1

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

$('.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>

Answer 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"}。基于此，我们将.active类添加或删除到.product元素中。根据类的不同，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体系结构做好准备。

使用jQuery在PHP中单击活动或不活动时如何更改颜色

2 个答案: