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循环中产品的背景颜色应该改变。表中有多个产品同名，当我第一次选择产品时，需要更改背景颜色

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

Answer 1

我猜您的代码无效，因为您的HTML无效。在DOM中; target="_blank"应该是唯一的。所以要避免重复的id;请修改PHP以及相应的JS代码。我们将id取代id="itmslct"而不是class，而不是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>'; }。

$(document).ready(function(){

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

});

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

2 个答案: