当我在php jquery中使产品处于活动和非活动状态时，活动和非活动中的jquery问题会更改颜色

Question

我要在激活产品和停用产品时更改（i）标签的颜色。

此功能正常运行，但是当我单击任何（a）标签时，也首先要更改（a）标签颜色。

我的CSS

.active{color:green;}
.deactive{color:red;}

我的Ajax代码

$('.pactive').click(function(){

    var pactiveId = $(this).attr('id');
    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);

    $.post('controller/ajax-product-active.php?pactiveId='+pactiveId,{},function(data)
    {  
        $('#product-active').html(data);
    });

});

ajax-product-active.php

$pactiveId = $_GET['pactiveId'];
$checkstatus = mysqli_query($conn,"select * from products where id = '{$pactiveId}'");
while($prow = mysqli_fetch_array($checkstatus))
 {
 if ($prow['status']=='Active') {

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

echo "<a id='$prow[id]' class='pactive' style='cursor: pointer;'>
                <i class='fa fa-circle active' aria-hidden='true' title='Active'></i></a>";


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

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

echo "<a id='$prow[id]' class='pactive' style='cursor: pointer;'>
                <i class='fa fa-circle deactive' aria-hidden='true'   title='Deactive'></i></a>";
 }
 }

第一张图片中的所有产品均处于活动状态

在第二张图片中，当我确定任何产品时，第一产品的颜色也会更改。

Answer 1

看起来您的ajax-product-active.php脚本回显了仅被单击的产品的HTML部分，对吗？

如果是这样，那么您需要查看HTML文档-您是否在每个产品上重新使用product-active ID属性？

$('#product-active').html(data);会将ID为product-active的任何内容的HTML内容更改为所传递的HTML，因此，例如，如果您产品页面的HTML看起来像这样，那么您将遇到他的问题：

<div id="products">
    <div class="product">
        <p>Product title 1</p>
        <div id="product-active"><i class='fa fa-circle active' aria-hidden='true' title='Active'></i></div>
    </div>

    <div class="product">
        <p>Product title 2</p>
        <div id="product-active"><i class='fa fa-circle active' aria-hidden='true' title='Active'></i></div>
    </div>

    <div class="product">
        <p>Product title 3</p>
        <div id="product-active"><i class='fa fa-circle active' aria-hidden='true' title='Active'></i></div>
    </div>
</div>

如果有效和无效产品之间的唯一区别是<i>元素上的类和title属性，那么我建议您不要从JavaScript更新HTML ，因此请删除$('#product-active').html(data);行-因为您已经在上面的代码行中更改了<i>和title属性。