jQueryはショッピングカートの完全な機能を実現します

この記事では、ショッピングカートの完全な機能を実現するためのjQueryの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

効果画像:

HTML&CSS:

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <title>ドキュメント</title>
 <script src="../jquery-3.4.1.min.js"></script>
 <スタイル>
  * {
   マージン: 0;
   パディング: 0;
  }
  
  .タブ{
   幅: 500ピクセル;
   境界線の折りたたみ: 折りたたみ;
   マージン: 0 自動;
  }
  
  .tab td、
  番目 {
   境界線: 1px実線 #000;
  }
  
  .タブ .num {
   幅: 20px;
  }
  
  .tab .add、
  .sub {
   幅: 20px;
  }
  
  。現在 {
   背景色: ピンク;
  }
 </スタイル>
</head>

<本文>
 <テーブルクラス="tab">
  <頭>
   <th>すべて選択<input type="checkbox" name="" value="" class="checkAll">
    <input type="チェックボックス" name="" value="" class="checkAll">
   </th>
   <th>製品名</th>
   <th>単価</th>
   <th>数量</th>
   <th>小計</th>
   <th>オペレーション</th>
  </thead>
  <t本文>
   <tr>
    <td><input type="checkbox" class="ed" /></td>
    <td>コンピューター</td>
    <td class="price">￥200.20</td>
    <td>
     <button type="button" class="sub">-</button>
     <入力タイプ="テキスト" 名前="" 値="1" クラス="数値">
     <button type="button" class="add">+</button>
    </td>
    <td class="small_total">200.20円</td>
    <td class="delete">削除</td>
   </tr>
   <tr>
    <td><input type="checkbox" class="ed" /></td>
    <td>携帯電話</td>
    <td class="price">￥100.30</td>
    <td>
     <button type="button" class="sub">-</button>
     <入力タイプ="テキスト" 名前="" 値="1" クラス="数値">
     <button type="button" class="add">+</button>
    </td>
    <td class="small_total">￥100.30</td>
    <td class="delete">削除</td>
   </tr>
   <tr>
    <td><input type="checkbox" class="ed" /></td>
    <td>エアコン</td>
    <td class="price">￥1000.99</td>
    <td>
     <button type="button" class="sub">-</button>
     <入力タイプ="テキスト" 名前="" 値="1" クラス="数値">
     <button type="button" class="add">+</button>
    </td>
    <td class="small_total">￥1000.99</td>
    <td class="delete">削除</td>
   </tr>
  </tbody>
 </テーブル>
 <div>
  <span><span style="color: red;" class="num_sum">1</span> 個のアイテムが選択されました</span>
  <span>合計:</span>
  <span class="sum" style="color: red;">0</span>
  <div><span style="color: red;" class="delSome">選択した商品を削除します</span>
   <span style="color: red;" class="delAll">ショッピングカートが空です</span>
  </div>
 </div>
 </本文>

</html>

JS:

// 内部の 3 つの小さなチェック ボタンの選択状態は、[すべて選択] ボタンに従います // チェックはチェックボックスの固有のプロパティであるため、prop() を使用してこのプロパティを取得および設定します $(function() {
   合計を取得します。
   $(".checkAll").change(関数() {
     // console.log($(this).prop("checked"));//すべて選択ボタンのステータス$(".ed,.checkAll").prop("checked", $(this).prop("checked"));
     合計を取得します。
     ($(".ed,.checkAll").prop("チェック済み")) の場合 {
      //すべて選択されている場合は、すべての製品にクラス名（背景色）を追加します
      $(".tab tbody").children().addClass("current");
     } それ以外 {
      $(".tab tbody").children().removeClass("current");
     }
    })
    // すべての小さなボタンが選択されている場合は、[すべて選択] ボタンが選択されます。小さなボタンが選択されていない場合は、[すべて選択] ボタンは選択されません。 //: チェックされたセレクター、選択されたフォーム要素を検索します $(".ed").change(function() {
    // console.log($(".ed:checked").length);// チェックされた小さなチェックボックスの数// console.log($(".ed").length);
    //console.log($(this).prop("チェック済み"));
    ($(".ed:checked").length === $(".ed").length) の場合 {
     $(".checkAll").prop("チェック済み", true);
    } それ以外 {
     $(".checkAll").prop("チェック済み", false);
    }
    合計を取得します。
    $(this).prop("チェック済み") の場合 {
     $(this).parents("tr").addClass("current");
    } それ以外 {
     $(this).parents("tr").removeClass("current");
    }
   })

   $(".add").click(function() {
    n = parseInt($(this).siblings(".num").val()); とします。
    //コンソールログ(n);
    n++;
    $(this).siblings(".num").val(n);
    price = $(this).parent().siblings(".price").html() とします。
    価格 = 価格.substr(1);
    //console.log(価格);
    $(this).parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
    合計を取得します。
   })
   $(".sub").click(function() {
     n = parseInt($(this).siblings(".num").val()); とします。
     //コンソールログ(n);
     (n === 1)の場合{
      false を返します。
     }
     n--;
     $(this).siblings(".num").val(n);
     price = $(this).parent().siblings(".price").html() とします。
     価格 = 価格.substr(1);
     //console.log(価格);
     $(this).parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
     合計を取得します。
    })
    //ユーザーはnum形式で値を直接変更することもできます（小さなバグ）。同じ方法で小計を計算します$(".num").change(function() {
    n = $(this).val() とします。
    price = $(this).parent().siblings(".price").html() とします。
    価格 = 価格.substr(1);
    $(this).parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
    合計を取得します。
   })

   関数 getSum() {
    let count = 0; //アイテムの合計数を計算 let money = 0; //合計金額を計算 $(".num").each(function(index) {
     ($(".ed").eq(index).prop("checked") == true) の場合 {
      count += parseInt($(".num").eq(index).val());
      お金 += parseFloat($(".small_total").eq(index).text().substr(1));
     }
    })
    $(".num_sum").html(カウント);
    $(".sum").html(money.toFixed(2));
   }

   //製品モジュールの削除 //現在の製品を削除するには削除をクリックするので、$(this) $(".delete").click(function() { から開始します。
     //現在の項目を削除します$(this).parent().remove();
     変更する
     合計を取得します。
     すべてクリアチェック();
    })
    //選択した商品を削除します。小さなチェックボックスが選択されている場合は、対応する商品を削除します。$(".delSome").click(function() {
     //選択した項目を削除します$(".ed:checked").parent().parent().remove();
     合計を取得します。
     すべてクリアチェック();
    })
    // ショッピングカートをクリアする $(".delAll").click(function() {
    $(".tab tbody").empty();
    合計を取得します。
    すべてクリアチェック();
   })

   関数 clearCheckAll() {
    $(".tab tbody")[0].innerText == '' の場合
     $(".checkAll").prop("チェック済み", false);
    }
   }
})

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: