UI設計したり、ウェブシステムを開発したりします。 

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

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

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

この記事を読むと(約5分)
特定の商品の数量を増やす「-」ボタンをイメージできます。

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

この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();
    }
  }  
});

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。