改变DIV颜色时调用的函数 - jQuery的

这里使用的印刷产品列表while循环改变DIV颜色时调用的函数 - jQuery的

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循环

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

来源

2017-05-30 ajay

ID应该是每个元素使用类属性 – JYoThI

例如独特的，如果我选择了一个名为薄饼比萨，那么所有的产品和有背景颜色必须改变 – ajay

作为此Jyothi指出，你应该使用类而不是ID为' itmslct'，目前它应该可以工作，但只能在第一个元素上（当重复ID时，它只能在找到的第一个元素上工作）。顺便说一下，您还应该为产品名称类使用前缀，以防万一它是可以被其他东西使用的常见词 – Kaddath

我猜您的代码无法正常工作，因为您的HTML无效。在DOM中; id应该是唯一的。所以要避免重复的ID;请修改PHP以及相应的JS代码。取而代之的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>'; 
}

和相关的JS是：

$(document).ready(function(){ 

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

});

来源

2017-05-30 11:52:35 vijayP

当我试图提醒loc_proname时，它只显示产品的一半名称，其余部分显示在警报 – ajay

中，然后避免将该值用作属性值。而不是尝试使用产品ID或产品编号，其中不会有任何空格或任何其他特殊字符。如果在该文本中有空格，那么在将其设置为'tr'类时也会遇到问题。 – vijayP

我们可以给班级号码吗？ – ajay

id S的关系是唯一的。您应该改用类。

此外，它似乎是设置tr的背景颜色。

尝试改造td单元格的样式。

要么与选择

$("."+loc_proname + ' td')

瞄准他们或类添加到td元件。

我会推荐第二种选择，因为样式特定的元素选择器在样式中不能很好地缩放。

来源

2017-05-30 11:56:22 vassiliskrikonis

如果我向td添加类，那么只有产品部分bg会改变，但我需要完整的行来改变 – ajay

将类添加到所有' td'元素。我知道，这太麻烦了，但是试着养成在你的CSS选择器中总是使用类而不是元素和ID的习惯。 – vassiliskrikonis

回答

相关问题