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

当我使产品处于活动和非活动状态时，我想更改I标签的颜色

这是成功运行，但当我点击任何一个标签改变第一个标签的颜色也

我的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>";
 }
 }

在第一个图像中，所有产品都处于活动状态

在第二张图片中，当我停止任何产品时，第一张产品的颜色也会改变。

---

您的ajax-product-active.php脚本似乎只回显了已单击产品的HTML部分，对吗

如果是这样，那么您需要查看您的HTML文档-您是否在每个产品上使用产品活动ID属性

$'product-active'.htmldata；将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>

---

如果活动产品和非活动产品之间的唯一区别是元素上的类和title属性，那么我建议您不要从JavaScript中更新HTML，所以删除$'product-active'.htmldata；行-因为您已经在上面的代码行中更改了and title属性。

我的html代码在这里，我指的是包含所有产品详细信息的html，而不仅仅是活动/非活动链接。