Opérations DOM pertinentes pour développer des paniers d'achat avec JavaScript (1)

Après avoir conçu la page d'accueil, vous pouvez effectuer des opérations DOM liées à la page d'accueil, y compris des événements de clic d'ajout de boutons,

Utilisation de cookies et de json, les cookies sont principalement utilisés pour partager les données actuelles avec le panier, pour faciliter l'opération.

Idée :

Étape 1 : Obtenir l'objet nœud à exploiter

Étape 2 : Une fois la page chargée, vous devez calculer le nombre de cookies locaux stockés pour produits, attribuez le numéro au compte

Étape 3 : Liez un événement de clic en cliquant

au bouton d'ajout de panier correspondant à chaque produit pour changer le cookie local

Obtenez le pid du produit actuel

Parcourez le tableau converti des cookies locaux, retirez le pid de chaque objet pour comparaison, s'ils sont égaux, le produit n'est pas ajouté pour la première fois

de le panier Sortez le produit, puis ajoutez 1 à la valeur pCount

Sinon : Créez un nouvel objet et enregistrez-le dans shopping. En même temps, la quantité de ce produit est de 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>

Créez un fichier index.js et insérez-y le code JavaScript ci-dessus.

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

sera appelé ultérieurement depuis la page HTML pour obtenir l'effet de module de fonction.