如何解決卡不變色使用javascript function

Question

我想實現這個功能，當product_stock == 0時卡片元素會變成灰色。 我嘗試使用 javascript 實現此功能，但它不起作用。 我不知道我的代碼有什么問題。 你們中的任何人都可以幫我解決這個問題嗎？ 如果你們能向我展示如何解決這個問題的代碼示例，我們將不勝感激。 任何幫助將不勝感激。 謝謝！

這是我的 PHP 代碼

    <?php
   $sql = "SELECT * FROM (( SELECT * FROM products) as YW1 
   LEFT JOIN 
   (SELECT product_id, SUM(quantity) totalquantity FROM ordered_items GROUP BY product_id) AS YW2 ON YW1.id = YW2.product_id) ORDER BY totalquantity DESC ";
  $query = $conn->query($sql);

  if (!mysqli_num_rows($query)) {
    echo '
      <div class="col-12">
        <div class="badge badge-danger">No Products Found</div>
      </div>
    ';
  } else {

    while ($row = $query->fetch_assoc()) {
      $product_stock =  $row['product_stock'];

    ?>
    <div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;" >
        <div class="product-wrapper" id="productlist">
          <img class="product-img" loading="lazy" src="images/product-main/<?php echo $row['product_photo']; ?>" alt="">
          <div class="card-body" >
            <h5 class="product-title" style="min-height: 39px; text-decoration: none; width:150px; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden; text-align: left !important;"><?php echo $row['product_title']; ?></h5>
            <p class="product-price">RM<?php echo $row['product_price']; ?>/KG</p>
               <p style="font-size: 10px; margin-top:-10px; margin-bottom:-2px;" ><span class="text-danger" > <?php echo $sum = $row['totalquantity'] ?? 0;?> SOLD </span></p>
                <p style="font-size: 10px;" ><span class="text-success"><?php echo $row['product_stock']; ?> IN STOCK </span></p>
            <a href="product.php?cid=<?php echo $row['id']; ?>" class="btn btn-block addtocart text-center" style="text-decoration: none">View More</a>
          </div>
        </div>
    </div>
    <?php 
      }
    } 
  ?>

這是 javascript，當product_stock = 0時，我用來將卡片變為灰色

更新的 JAVASCRIPT 代碼

<script>
  getfocus();
function getfocus() {
  document.getElementById("productlist").focus();
    var product_stock = "<?php echo $product_stock; ?>";
    if(product_stock == 0) {
        $(product_stock).focus(); 
        $(product_stock).css({'border' : '1px solid red'});
        $(product_stock).css("background-color", "#d0d0d0");
    }
  }
</script>

Answer 1

這是因為您在腳本上調用 product_stock 變量時未定義它。 而不是使用 javascript 代碼，只需將樣式直接添加到 PHP 代碼中即可。

 while ($row = $query->fetch_assoc()) {
  $product_stock =  $row['product_stock'];

 ?>
    <div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;" >
        <div class="product-wrapper" id="productlist" style='<?php echo $product_stock == 0 ? "background-color:#d0d0d0; border:1px solid red;" : "";  ?>'>
            <img class="product-img" loading="lazy" src="images/product-main/<?php echo $row['product_photo']; ?>" alt="">
               <div class="card-body" >
                 <h5 class="product-title" style="min-height: 39px; text-decoration: none; width:150px; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden; text-align: left !important;"><?php echo $row['product_title']; ?></h5>
                 <p class="product-price">RM<?php echo $row['product_price']; ?>/KG</p>
                 <p style="font-size: 10px; margin-top:-10px; margin-bottom:-2px;" ><span class="text-danger" > <?php echo $sum = $row['totalquantity'] ?? 0;?> SOLD </span></p>
                 <p style="font-size: 10px;" ><span class="text-success"><?php echo $row['product_stock']; ?> IN STOCK </span></p>
                 <a href="product.php?cid=<?php echo $row['id']; ?>" class="btn btn-block addtocart text-center" style="text-decoration: none">View More</a>
               </div>
            </div>
        </div>
 <?php 
  }