SQL見るだけクエリ#293 特定の商品の数量を増やす「-」ボタン

記入日：2023-10-28　編集日：2023-10-28

特定の商品の数量を増やす「-」ボタンに関して解説してみようと思います。

特定の商品の数量を増やす「-」ボタン

このJavaScriptスクリプトは、Webページ上で商品の数量を操作する機能を提供します。

$('.decreaseBtn').click(function() {
  var item_id = $(this).data('item_id'); // 例: 'B011'
  var quantity = parseInt($('#quantity' + item_id).text()); // 例: 0

  if (quantity > 0) {
    quantity--;
    $('#quantity' + item_id).text(quantity);
    calculateSubtotal(item_id, quantity, unitItems);
    calculateTotalPrice(unitItems);

    if (quantity === 0) {
      $('#subtotalLabel' + item_id).hide();
    }
  }  
});

このスクリプトは、特定のボタンがクリックされた際に以下の処理を行います：

1. クリックされたボタンから商品IDを取得します。
2. 現在の個数を取得し、個数が0より大きい場合は個数を1減らし、 小計と合計金額を更新します。
3. 個数が0になった場合は、小計のラベルを非表示にします。

以下では、具体的なコードの説明を行います：

// ボタンがクリックされたときの処理
$('.decreaseBtn').click(function() {
  // クリックされたボタンから商品IDを取得
  var item_id = $(this).data('item_id'); // 例: 'B011'

  // 現在の個数を取得
  var quantity = parseInt($('#quantity' + item_id).text()); // 例: 0

  // 個数が0より大きい場合
  if (quantity > 0) {
    // 個数を1減らす
    quantity--;

    // 個数を表示している要素を更新
    $('#quantity' + item_id).text(quantity);

    // 小計を計算する関数を呼び出し
    calculateSubtotal(item_id, quantity, unitItems);

    // 合計金額を計算する関数を呼び出し
    calculateTotalPrice(unitItems);

    // 個数が0になった場合
    if (quantity === 0) {
      // 小計のラベルを非表示にする
      $('#subtotalLabel' + item_id).hide();
    }
  }  
});