JavaScript を使用したショッピング カートの開発に関連する DOM 操作 (1)

ホームページをデザインした後、ボタンの追加のクリックイベント、

CookieとJSONの適用など、ホームページに関連するDOM操作を実行できます。Cookieは主に操作を容易にするために現在のデータをショッピングカートと共有するために使用されます。

アイデア:

ステップ 1: 操作するノード オブジェクトを取得する

ステップ 2: ページがロードされた後、ローカル Cookie に保存されている製品の数を計算し、その数値を ccount に割り当てる必要があります

3 番目step ステップ: 各製品に対応するショッピング カートの追加ボタンにクリック イベント onclick をバインドします

ローカル Cookie を変更します

現在の商品の PID を取得します

ローカル Cookie に変換された配列をループし、各オブジェクトの PID を取得します比較のために、それらが等しい場合、商品は初めて追加されません

ショッピング カートから商品を削除し、pCount 値に 1 を追加します

それ以外の場合: 新しいオブジェクトを作成し、ショッピングに保存します。同時に、この商品の数量は 1 です

<script>
var ccount = document.getElementById("ccount"); //显示商品总数量的标签节点对象
var btns = document.querySelectorAll(".list dl dd button"); //所有的购物车按钮
//querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。

//约定好用名称为datas的cookie来存放购物车里的数据信息  datas里所存放的就是一个json字符串
var listStr = cookieObj.get("datas");
/*判断一下本地是否有一个购物车（datas），没有的话，创建一个空的购物车，有的话就直接拿来使用*/
if(!listStr) { //没有购物车     datas  json
  cookieObj.set({
    name: "datas",
    value: "[]"
  });
  listStr = cookieObj.get("datas");
}

var listObj = JSON.parse(listStr); //数组
/*循环遍历数组，获取每一个对象中的pCount值相加总和*/
var totalCount = 0; //默认为0
for(var i = 0, len = listObj.length; i < len; i++) {
  totalCount = listObj[i].pCount + totalCount;
}
ccount.innerHTML = totalCount;

/*循环为每一个按钮添加点击事件*/
for(var i = 0, len = btns.length; i < len; i++) {
  btns[i].onclick = function() {
    var dl = this.parentNode.parentNode;
    //parentNode 获取文档层次中的父对象。
    var pid = dl.getAttribute("pid");//获取自定义属性
    //getAttribute() 方法通过名称获取属性的值。
    var arrs = dl.children;//获取所有子节点
    if(checkObjByPid(pid)) {
      listObj = updateObjById(pid, 1)
    } else {
      var imgSrc = arrs[0].firstElementChild.src;
      var pName = arrs[1].innerHTML;
      var pDesc = arrs[2].innerHTML;
      var price = arrs[3].firstElementChild.innerHTML;
      var obj = {
        pid: pid,
        pImg: imgSrc,
        pName: pName,
        pDesc: pDesc,
        price: price,
        pCount: 1
      };
      listObj.push(obj);
      //push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
      listObj = updateData(listObj);
    }
    ccount.innerHTML = getTotalCount();
  }
}
</script>

index.js ファイルを作成し、その中に上記の JavaScript コードを入れます。

<script type="text/javascript" src="index.js"></script>

後で HTML ページから呼び出されて、汎用モジュールの効果が実現されます。