シンプルなショッピングカートの最も完全なコード分析を実装する JavaScript (ES6 オブジェクト指向)

この記事では、シンプルなショッピングカートを実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

コード：

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8" />
  <title>ES6 ショッピングカート</title>
  <スタイル タイプ="text/css">
   テーブル {
    幅: 50%;
    位置: 相対的;
    マージン: 0px 自動;
    境界線の折りたたみ: 折りたたみ;
    境界線: 1px の灰色
    ボックスのサイズ: 境界線ボックス;
   }
   番目 {
    背景色: コーラル;
    高さ: 2.5em;
    マージン: 0 自動;
   }
   tr {
    高さ: 2.5em;
    マージン: 0 自動;
    テキスト配置: 中央;
   }
   。箱 {
    マージン: 自動;
    幅: 50%;
   }
  </スタイル>
 </head>
 <本文>
  <h3 style="text-align: center;margin-top: 100px;">きっと気に入るでしょう</h3>
  <表の境界線="1px" id="更新表">
   <t本文>
   <tr>
    <th>シリアル番号</th>
    <th>製品名</th>
    <th>単価</th>
    <th>オペレーション</th>
   </tr>
   <tr class="update-goods">
    <td>1</td>
    <td>ロウジアモ</td>
    <td>8</td>
    <td><input type="button" class="update" value="カートに追加" /></td>
   </tr>
   <tr class="update-goods">
    <td>2</td>
    <td>生地をこねる</td>
    <td>6</td>
    <td><input type="button" class="update" value="カートに追加" /></td>
   </tr>
   <tr class="update-goods">
    <td>3</td>
    <td>冷凍</td>
    <td>3</td>
    <td><input type="button" class="update" value="カートに追加" /></td>
   </tr>
   <tr class="update-goods">
    <td>4</td>
    <td>マトンスープパン</td>
    <td>25</td>
    <td><input type="button" class="update" value="カートに追加" /></td>
   </tr>
   </tbody>
  </テーブル>
  <h3 style="text-align: center;">ショッピングカート</h3>
  <テーブルボーダー="1px" id="商品">
   <t本文>
    <tr>
     <th>シリアル番号</th>
     <th>製品名</th>
     <th>数量</th>
     <th>単価</th>
     <th>小計</th>
     <th>オペレーション</th>
    </tr>
    <tr>
     <td>1</td>
     <td>ロウジアモ</td>
     <td>
      <button type="button">-</button>
      <span class="goods-num">0</span>
      <button type="button">+</button>
     </td>
     <td>
      単価: <span class="goods-price">8</span>
     </td>
     <td>
      小計: <span class="goods-single-price">0</span>
     </td>
     <td>
      <input type="button" class="deled" value="削除" />
     </td>
    </tr>
    <tr>
     <td>2</td>
     <td>生地をこねる</td>
     <td>
      <button type="button">-</button>
      <span class="goods-num">0</span>
      <button type="button">+</button>
     </td>
     <td>
      単価:<span class="goods-price">6</span>
     </td>
     <td>
      小計: <span class="goods-single-price">0</span>
     </td>
     <td>
      <input type="button" class="deled" value="削除" />
     </td>
    </tr>
    <tr>
     <td colspan="5">
      合計で<span id="goods-total-num">0</span>個の商品があり、合計金額は<span id="goods-total-price">0</span>元です。
     </td>
    </tr>
   </tbody>
  </テーブル>
 </本文>
</html>
<script type="text/javascript">
 クラス カート {
  コンストラクタ() {
   this.eventBind();
  }
  //商品の合計数量を取得して更新する getGoodsNumAndUpdate() {
   //すべての商品の数量を取得します。let oGoodsNum = document.getElementsByClassName("goods-num");
   //商品数の合計値を保存します。let goodsTotalNum = 0;
   //すべての商品をループします for (let i = 0; i < oGoodsNum.length; i++) {
    //ループされたすべての商品の数量を追加します。goodsTotalNum += Number(oGoodsNum[i].innerHTML);
   }
   //概要列の商品の合計数を取得します。let oGoodsTotalNum = document.getElementById("goods-total-num");
   //ループで取得した商品数の合計を集計列の商品総数に代入します。oGoodsTotalNum.innerHTML = goodsTotalNum;
  }
  //商品の合計価格を取得して更新する getGoodsPriceAndUpdate() {
   //小計を取得します let oGoodsSinglePrice = document.getElementsByClassName("goods-single-price");
   //小計値を受け入れるための新しい要素を作成します（小計を取得する要素への最終的な割り当て用）
   goodsTotalPrice = 0 とします。
   //すべての小計をループします for (let i = 0; i < oGoodsSinglePrice.length; i++) {
    //ループされたすべての小計数量を追加します。goodsTotalPrice += Number(oGoodsSinglePrice[i].innerHTML);
   }
   //概要列の合計価格を取得します。let oGoodsTotalPrice = document.getElementById("goods-total-price");
   //ループで取得した小計数量の合計を集計列の合計価格に代入します。oGoodsTotalPrice.innerHTML = goodsTotalPrice;
  }
  //2. 小計を取得する getSinglePrice(num, price) {
   //各行の小計は、単価とこの行の積に等しくなります。 return num * price;
  }
  // プラスボタンメソッド addGoods(btn) {
   //プラス記号の前の兄弟要素（中央の値）を取得します
   oGoodsNum = btn.previousElementSibling とします。
   //1. クリックすると、値が 1 つ増加します oGoodsNum.innerHTML = Number(oGoodsNum.innerHTML) + 1;
   //単価を取得します（btn 親要素の次の要素の子要素）
   oPrice = btn.parentNode.nextElementSibling.firstElementChild とします。
   //小計を取得します（btn 親要素の次の要素の次の要素の子要素）
   oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild とします。
   //2. 小計値を再度取得し、小計に割り当てます oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML, oPrice.innerHTML);
   //3. 商品の合計数量を取得して更新する（再実行を呼び出し > データを更新）
   this.getGoodsNumAndUpdate();
   //4. 合計商品の合計価格を取得して更新する（再実行を呼び出し > データを更新）
   this.getGoodsPriceAndUpdate();
  }
  //マイナスボタンメソッド minGoods(btn) {
   //マイナス記号の次の兄弟要素（中央の値）を取得します
   oGoodsNum = btn.nextElementSibling とします。
   //商品の数が0より大きいかどうかを判断します if (oGoodsNum.innerHTML > 0) {
    //1. クリックすると、値が 1 つ減少します oGoodsNum.innerHTML = oGoodsNum.innerHTML - 1;
    //単価を取得します（btn 親要素の次の要素の子要素）
    oPrice = btn.parentNode.nextElementSibling.firstElementChild とします。
    //小計を取得します（btn 親要素の次の要素の次の要素の子要素）
    oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild とします。
    //2. 小計値を再度取得し、小計に割り当てます oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML, oPrice.innerHTML);
    //3. 商品の合計数量を取得して更新する（再実行を呼び出し > データを更新）
    this.getGoodsNumAndUpdate();
    //4. 商品の合計価格を取得して更新する（再実行 > データの更新を呼び出す）
    this.getGoodsPriceAndUpdate();
   }
  }
  //削除ボタンメソッド delGoods(btn) {
   //ショッピングカートのテーブル要素を取得します。let god = document.getElementById("goods");
   //このボタンの親要素の親要素を取得します。let oTr = btn.parentNode.parentNode;
   //次にこの要素を削除します（ここではボタンで選択された tr 要素全体を指します）
   oTr.削除();
   // 数字を並べ替えます (god という名前のテーブル要素の下にあるすべての tr サブ要素をループします) (2 番目のサブ要素から開始し、最後の小計行を削除します)
   (i = 1 とします; i < god.firstElementChild.children.length - 1; i++) {
    //ループ後の要素値 i を、テーブル要素 god の下の子要素 tr の下の最初の子要素 td に割り当てます。
    god.firstElementChild.children[i].firstElementChild.innerHTML = i;
   }
   //3. 商品の合計数量を取得して更新する（再実行を呼び出し > データを更新）
   this.getGoodsNumAndUpdate();
   //4. 商品の合計価格を取得して更新する（再実行 > データの更新を呼び出す）
   this.getGoodsPriceAndUpdate();
  }
  
  //注文メソッドを追加 update() { 
   //クラス名が update のすべての要素を取得します。let btn = document.getElementsByClassName("update");
   //ID 名 update-table を持つすべての要素を取得します。let updateTable = document.getElementById("update-table");
   //ショッピングカートのテーブル要素を取得します。let god = document.getElementById("goods"); 
   //ショッピングカートテーブル要素の最初の子要素 tbody のすべての子要素 tr を取得します
   gods = god.firstElementChild.children とします。
   //ターゲット要素にfalseが割り当てられます
   フラグを false にします。
   //これは、イベント本体でカート オブジェクトが上書きされるのを回避するためのものです。let that = this;
   //クラス名を持つすべての要素をループして更新します for (let i = 0; i < btn.length; i++) {
    //クラス名更新のクリックイベント btn[i].onclick = function() {
     //ショッピングカートテーブル要素の最初のサブ要素 tbody のすべてのサブ要素 tr をループします。
     (j = 0; j < gods.length - 1; j++) の場合 {
      // メニューにこの料理があるかどうかをループして判断し、この料理がある場合は 1 を加算します。
      // 本来の意図は、ショッピングカート内で同じ名前の商品を見つけることです。ある場合は、ショッピングカートデータ内の商品数 + 1 を実行します。ない場合は、フラグを true に設定して判定から飛び出します // これは、更新要素入力タグのクラス名です // ショッピングカートテーブル内のすべての子要素 tr のトラバースの下の最初の子要素の内容 == クラス名が更新要素入力である親要素 td の前の兄弟要素の内容 if (gods[j].children[1].innerHTML == this.parentNode.previousElementSibling.previousElementSibling.innerHTML) {
       //ショッピングカートテーブル内のすべてのサブ要素trのトラバースの下の2番目のサブ要素の内容（つまり、ショッピングカート内のアイテムの数）+ 1
       gods[j].children[2].children[1].innerHTML = " " + (Number(gods[j].children[2].children[1].innerHTML) + 1) + " ";
       // ショッピング カート テーブル内のすべてのサブ要素 tr のトラバースの下の 4 番目のサブ要素の内容 (つまり、ショッピング カートの小計の値が割り当てられます)
       gods[j].children[4].innerHTML = '小計: <span class="goods-single-price">' +
       gods[j].children[2].children[1].innerHTML * gods[j].children[3].firstElementChild.innerHTML + '</span>';
       //3. 商品の合計数量を取得して更新する（再実行を呼び出し > データを更新）
       that.getGoodsNumAndUpdate();
       //4. 商品の合計価格を取得して更新する（再実行 > データの更新を呼び出す）
       that.getGoodsPriceAndUpdate();
       //フラグ値をfalseに代入する
       フラグ = false;
       //このループから抜け出します break;
      } それ以外 {
      // ショッピング カート テーブルでトラバースされたすべての子要素 tr の最初の子要素の内容が、クラス名 update element input を持つ親要素 td の前の兄弟要素の内容と等しい場合に実行します // フラグを true に割り当てます
       フラグ = true;
      }
     }
     if (フラグ) {
      //そのような料理がない場合は追加します //ノードtrを作成します
      tr = document.createElement("tr"); とします。
      //このノードのコンテンツを追加します tr.innerHTML=
       '<td>'+(gods.length-1)+'</td>'+
       '<td>'+this.parentNode.previousElementSibling.previousElementSibling.innerHTML+
       '</td><td><button type="button">-</button><span class="goods-num"> 1 </span><button type="button"> +</button></td><td>単価:<span class="goods-price">' +
       this.parentNode.previousElementSibling.innerHTML +
       '</span></td><td>小計:<span class="goods-single-price">' + 
       this.parentNode.previousElementSibling.innerHTML +
       '</span></td><td><input type="button" class="deled" value="削除" /></td>';
       // tbody に新しい要素を追加します。god.firstElementChild.insertBefore(tr, god.firstElementChild.lastElementChild);
      //イベントボタンをトリガーする that.eventBind();
      //3. 商品の合計数量を取得して更新する（再実行を呼び出し > データを更新）
      that.getGoodsNumAndUpdate();
      //4. 商品の合計価格を取得して更新する（再実行 > データの更新を呼び出す）
      that.getGoodsPriceAndUpdate();
     }
    }
    // Guess You Like 内のアイテムの順序を並べ替えます for (let i = 1; i < updateTable.firstElementChild.children.length; i++) {
     //新しく追加された製品のシリアル番号にソートされた値を割り当てます updateTable.firstElementChild.children[i].firstElementChild.innerHTML = i;
    }
   }
  }
  //イベントボタンをトリガーするeventBind() {
   //タグ名がbottonのすべてのボタンを取得します。let oBtns = document.getElementsByTagName("button");
   //これは、イベント本体でカート オブジェクトが上書きされるのを回避するためのものです。let that = this;
   //すべてのボタンをループします for (let i = 0; i < oBtns.length; i++) {
    if (i % 2) 奇数の場合はaddGoods()メソッドをトリガーします oBtns[i].onclick = function() {
      that.addGoods(これ);
     }
    } else{// 偶数の場合はminGoods()メソッドをトリガーします oBtns[i].onclick = function() {
      that.minGoods(これ);
     }
    }
   }
   //クラス名がdeledのすべての要素を取得します。let oDelBtns = document.getElementsByClassName("deled");
   //削除されたすべての要素をループします for (let i = 0; i < oDelBtns.length; i++) {
    //削除された要素のクリックイベント oDelBtns[i].onclick = function() {
     //削除効果を実行するにはdelGoods()メソッドを呼び出します。that.delGoods(this);
    }
   }
   // 注文を追加するには this.update() を呼び出します。
  }
 }
 c = new Cart();
</スクリプト>

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

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