使用 jQuery/Javascript 獲取並求和動態和多元素的值

Question

我在購物車中有一個產品列表。 現在，我想計算購物車中的所有產品價格。 但我仍然不知道如何從動態元素中獲取和計算值。 這是我的購物車中動態產品的代碼：

<div class="modal fixed-right fade" id="modalShoppingCart" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-vertical" role="document">
    <div class="modal-content">
      <ul class="list-group list-group-lg list-group-flush">
        <?php 
          $no = 1;
          $query = mysqli_query($con, "SELECT c.id, c.quantity, c.product_id, p.name, p.thumbnail, p.sale_price FROM cart AS c LEFT JOIN product AS p ON c.product_id= p.id LEFT JOIN user AS u ON c.user_id=u.id WHERE c.product_id = p.id GROUP BY p.id")or die(mysqli_error($con));

          while($data = mysqli_fetch_array($query)){
            $product_id = $data['product_id'];
            $sql  = mysqli_query($con, "SELECT COUNT(product_id) FROM cart WHERE product_id='$product_id' GROUP BY product_id ");

            $row = mysqli_fetch_array($sql);
            $quantity = $row['COUNT(product_id)'];

            $sale_price = (int)$data['sale_price'] * $quantity;
        ?>
        <li class="list-group-item">
          <div class="row align-items-center">
            <div class="col-4">
              <a href="product.html">
                <img class="img-fluid" src="../assets/img/<?php echo $data['thumbnail']; ?>" alt="...">
              </a>
            </div>
            <div class="col-8">
              <p class="font-size-sm font-weight-bold mb-6">
                <a class="text-body" href="product.php"><?php echo $data['name']; ?></a> <br>
                <span class="text-muted"><?php echo 'Rp'.(str_replace(',', '.', number_format($sale_price))) ?? 'Rp0'; ?></span>
                <input type="hidden" name="sale_price" class="sale_price<?php echo $no++; ?>" value="<?php echo $sale_price; ?>">
              </p>
              <div class="d-flex align-items-center">
                <input type="number" class="d-inline-block form-control form-control-xxs w-auto m-width-65" name="quantity" value="<?php echo $quantity; ?>">
                <a class="font-size-xs text-gray-400 ml-auto" href="hapus-produk-cart.php?id=<?php echo $data['id']; ?>">
                  <i class="fe fe-x"></i> Hapus
                </a>
              </div>
            </div>
          </div>
        </li>
        <?php } ?>
      </ul>

      <div class="modal-footer line-height-fixed font-size-sm bg-light mt-auto">
        <strong>Total</strong> <strong class="ml-auto"></strong>
      </div>

      <div class="modal-body">
        <a class="btn btn-block btn-dark" href="checkout.php">Checkout Pesanan</a>
      </div>
    </div>
  </div>
</div>

由於產品是動態的，我不知道如何獲取<input type="hidden" name="sale_price" class="sale_price<?php echo $no++; ?>" value="<?php echo $sale_price; ?>"> . 以及如何使用 jQuery 或 javascript 進行計算。 你能幫我怎么做嗎？ 我真的需要你們的幫助。 先感謝您。

Answer 1

從哪兒開始？ 我不打算處理使用准備好的語句的需要，但我建議您閱讀有關 SQL 注入的內容。 所以，讓我們嘗試從您的第一個查詢開始 -

SELECT c.id, c.quantity, c.product_id, p.name, p.thumbnail, p.sale_price
FROM cart AS c
LEFT JOIN product AS p ON c.product_id= p.id
LEFT JOIN user AS u ON c.user_id=u.id
WHERE c.product_id = p.id
GROUP BY p.id

為什么左派加入？ 這些應該是 INNER 連接，當然？ 如果 SELECT 列表中沒有返回用戶表，為什么還要加入用戶表？ 此當前查詢將返回所有購物車及其各自的產品和用戶。 可能不是你想要的。 也許您想要當前用戶的購物車和相關產品？ 我將在此基礎上繼續。

SELECT c.id, c.quantity, c.product_id, p.name, p.thumbnail, p.sale_price, c.quantity * p.sale_price AS line_item_total
FROM cart AS c
JOIN product AS p ON c.product_id= p.id
WHERE c.user_id = ? /* where ? is the current user's id */

我冒昧地修改了查詢以讓數據庫為我們返回 line_item_total。

現在進入第二個查詢，為第一個查詢返回的每條記錄運行 -

SELECT COUNT(product_id)
FROM cart
WHERE product_id='$product_id'
GROUP BY product_id

我不太確定這應該做什么，但它不會像你期望的那樣工作。 它將返回購物車中有此 product_id 的用戶的 COUNT 個。 唯一相關的數量應該是您的購物車查詢已經返回的數量。

這絕對不漂亮，但它應該足以讓你開始 -

<?php

$current_user_id = 1; // coming from session or ...

mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$link = mysqli_connect('host', 'user', 'pass', 'db');

$sql = 'SELECT c.id, c.quantity, c.product_id, p.name, p.thumbnail, p.sale_price, c.quantity * p.sale_price AS line_item_total
FROM cart AS c
JOIN product AS p ON c.product_id = p.id
WHERE c.user_id = ?';

$stmt = mysqli_prepare($link, $sql);
mysqli_stmt_bind_param($stmt, 'i', $current_user_id);
mysqli_stmt_execute($stmt);

$result = mysqli_stmt_get_result($stmt);
$cart_items = mysqli_fetch_all($result, MYSQLI_ASSOC);

?>

<div class="modal fixed-right fade" id="modalShoppingCart" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-vertical" role="document">
        <div class="modal-content">
            <ul class="list-group list-group-lg list-group-flush">
                <?php $cart_total = 0; foreach ($cart_items as $cart_item): ?>

                    <li class="list-group-item cart-item">
                        <span class="cart-item-img"><img src="../assets/img/<?php echo $cart_item['thumbnail']; ?>"></span>
                        <span class="cart-item-name"><?php echo $cart_item['name']; ?></span>
                        <span class="cart-item-price"><?php echo $cart_item['sale_price']; ?></span>
                        <span class="cart-item-quantity"><input type="number"  name="quantity[<?php echo $cart_item['product_id']; ?>]" value="<?php echo $cart_item['quantity']; ?>"></span>
                        <span class="cart-item-total"><?php echo $cart_item['line_item_total']; ?></span>
                    </li>

                <?php $cart_total += $cart_item['line_item_total']; endforeach; ?>
            </ul>

            <div class="modal-footer line-height-fixed font-size-sm bg-light mt-auto">
                <strong>Total</strong> <span id="cart-total-price" class="ml-auto"><?php echo $cart_total; ?></span>
            </div>

            <div class="modal-body">
                <a class="btn btn-block btn-dark" href="checkout.php">Checkout Pesanan</a>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    $('.cart-item-quantity input').change(function() {
        updateQuantity(this);
    });

    /* Update quantity */
    function updateQuantity(quantityInput) {
        /* Calculate line price */
        var productRow = $(quantityInput).closest('li.cart-item');
        var price = parseFloat(productRow.find('span.cart-item-price').text());
        var quantity = $(quantityInput).val();
        var linePrice = price * quantity;
        productRow.find('span.cart-item-total').text(linePrice.toFixed(2));
        updateCart();
    }

    function updateCart() {
        var cartTotal = 0;
        $('span.cart-item-total').each(function () {
            cartTotal += parseFloat($(this).text());
        });
        $('span#cart-total-price').text(cartTotal.toFixed(2));
    }
});
</script>