DOM四步来写购物车效果

最新推荐文章于 2022-05-23 07:50:44 发布

原创最新推荐文章于 2022-05-23 07:50:44 发布 · 718 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #dom操作

一、用DOM四步来写购物车效果

1.DOM四步

a. 先查找触发事件的元素 b. 为元素绑定事件处理函数 c. 再查找要修改的元素 d. 修改元素

代码如下（示例）：

  <script>
//1.1 先查找id为data的table
    var table=document.getElementById("data");
    //1.2 再查找table下所有button元素
    var buttons=table.getElementsByTagName("button");
    console.log(buttons);
    //2. 为元素绑定单击事件:
    //遍历查找结果buttons中每个按钮对象
    for(var button of buttons){
 //每遍历一个按钮对象button，就为当前按钮赋值一个事件处理函数
      button.onclick=function(){
        //本例中: 查找当前按钮的爹的第二个孩子
        var span=this.parentElement.children[1];
        //4. 修改元素
        //4.1 先获取span元素中的旧内容，转为数字
        var n=parseInt(span.innerHTML);
        //4.2 再对数字+1或-1
        //如果当前按钮的内容是+
        if(this.innerHTML=="+"){
          n++;//就n++;
        }else if(n>1){
        //否则如果当前按钮的内容是-，并且n的值还>1
          n--;//才n--;
        }
        //4.3 再将计算出来的新数字放回span元素的内容中
        span.innerHTML=n;
      }
    }
  </script>


## 2.读入数据
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210320160753513.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5fY18=,size_16,color_FFFFFF,t_70#pic_center)