javascript - 调用函数时更改 div 颜色 - jquery

Question

这里是使用 while 循环打印的产品列表

while($rr = $retval->fetch_object()) {
    $summery_return .= '<div class="w3-blue w3-card-4" style="font-size:18px;">';
    $summery_return .= '<span style="color:white;padding:2px;font-weight:bold" id="itmslct" data-proname='.$rr->product.'>'.$rr->product.'<span style="float:right;margin-right:19px;">'.$rr->qty.'</span>';
    $summery_return .='</span><hr style="margin:3px"></div>';
}

脚本

  $summery_return .='<script>
    $(document).ready(function(){

            $("#itmslct").click(function() {
                var loc_proname = $(this).attr("data-proname");
                alert(loc_proname);
            $("."+loc_proname).css("background-color", "#f00"); 

             });

             });
     </script>';
 return $summery_return;

表格中的产品

while($row = $result2->fetch_object()){           
    $icost=$row->quantity*$row->price;
    $progress_return .='<tr class='.$row->product.'>
          <td><b>'.$row->product.'</b></td>
         <td><b>'.$row->type.'</b></td>
         <td><b>'.$row->quantity.'</b></td>
         <td><b>'.$row->pack.'</b></td>
         <td><b>'.$row->topping.'</b></td>
         <td><b>'.$row->extra.'</b></td>
         <td><b>'.$row->comments.'</b></td>
         <td><button style="background-color:red;color:white">Done</button></td>
        </tr>';     
    $total=$total+$row->quantity*$row->price;                   
} 

当我点击第一个 while 循环打印的产品时，第二个 while 循环中产品的背景颜色应该改变。 表中有多个具有相同名称的产品，当我在第一个 while 循环上选择产品时，所有背景颜色都需要更改

我尝试这样做，但没有看到任何结果

Answer 1

我猜您的代码无法正常工作，因为您的 HTML 无效。在 DOM 中； id 应该是唯一的。所以要避免重复的id；请修改PHP以及相应的JS代码。我们将把它改为 class，而不是 id="itmslct"，如下所示:

while($rr = $retval->fetch_object()) {
    $summery_return .= '<div class="w3-blue w3-card-4" style="font-size:18px;">';
    $summery_return .= '<span style="color:white;padding:2px;font-weight:bold" class="itmslct" data-proname='.$rr->product.'>'.$rr->product.'<span style="float:right;margin-right:19px;">'.$rr->qty.'</span>';
    $summery_return .='</span><hr style="margin:3px"></div>';
}

相关的 JS 是:

$(document).ready(function(){

    $(".itmslct").click(function() {
        var loc_proname = $(this).attr("data-proname");
        alert(loc_proname);
        $("."+loc_proname).css("background-color", "#f00"); 
    });

});