js购物车(学会后js轻松拿下)

一·购物车思路

1. 渲染
使用字符串拼接的方法将数据写入要渲染的对象里，用到innerHTML
来写进去
2. 加减部分
@1 点击两个button来控制input框里的数字，用到点击事件，并且获得点击加减
数组，所以想到for循环，而且想到用到自制性函数或下标指向，如果没有它只会打印最后一项；
@2找到原数组的初始数给num，加就是每次点就是加一，
并且写入到input里，要用value；更重要的就是要更新数据为后面所用；
减方面同理
@3 这样每项的金额也可以写出来，用num 乘 现价 然后写入
3. 全选
先点击事件然后循环，前面var一个值，看下全选的状态，然后给每一项赋给全选的false或true；并且更新数据，备后面所用
4. 单选
先循环然后点击事件 用到   every思想，每项是真结果才是真，注意因为前面数据都是真，所以前面先给他     取个反

5. 求结算和数量
for循环前面 先赋值，循环里面要判断一下，选中的才能算到里面去 重要的是有每次加减 每项选择都要进行结算，所以想到给它封装 并且加减,单选，全选 进行调用；还有首先前面进行调用，这样刚开始有数据，

6. 删除
想到每次删除后都要进行重新渲染，所以渲染部分要封装，事件也要封装，
删除里面就要先循环然后点击   想到使用splice 就可以了数组.splice（index，1）

二·思路理完上代码
html部分

 <div class="wrapper">
        <div class="top">
            <ul>
                <li>
                    <p>
                        <b>全部商品</b>
                        <b id="sc"></b>
                    </p>
                    <p>
                        配送至：
                        <select name="" id="">
                            <option value="">北京昌平区以外</option>
                        </select>
                    </p>
                </li>
                <li>
                    <p>
                        <input type="checkbox" name="" id="allcheck">
                        <span>全选</span>
                    </p>
                    <p>商品</p>
                    <p>单价</p>
                    <p>数量</p>
                    <p>小计</p>
                    <p>操作</p>
                </li>
            </ul>
        </div>
        <div class="main">
        </div>

        <p>
            已选商品 <span class="num"></span>
        </p>
        <p>
            金额<span class="sum"></span>
        </p>

    </div>

css部分

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

@mixin wh($w, $h) {
    width: $w;
    height: $h;
}

.top {
    @include wh(990px, 70px);
    margin: 0 auto;

    ul {
        li:nth-child(1) {
            display: flex;
            justify-content: space-between;

            p:first-child {
                b {
                    color: red;
                    font-size: 18px;
                }
            }
        }

        li:nth-child(2) {
            background: #f3f3f3;
            @include wh(990px, 46px);
            line-height: 46px;

            p {
                float: left;

                &:nth-child(2) {
                    margin-left: 76px;

                }

                &:nth-child(3) {
                    margin-left: 452px;
                }

                &:nth-child(4) {
                    margin-left: 69px;
                }

                &:nth-child(5) {
                    margin-left: 105px;
                }

                &:nth-child(6) {
                    margin-left: 39px;
                }
            }
        }
    }
}

.main {
    @include wh(990px, auto);
    margin: 0 auto;
    clear: both;

    ul {
        li:nth-child(1) {
            margin-top: 16px;
        }

        li:nth-child(2) {
            @include wh(990px, 123px);
            background: #fff4e8;
            border-top: black 2px solid;

            p {
                float: left;

                &:nth-child(1) {
                    display: flex;

                    span {
                        display: inline-block;
                        @include wh(199px, 36px);
                        font-size: 12px;
                    }
                }

                &:nth-child(2) {
                    margin-left: 290px;
                }

                &:nth-child(3) {
                    margin-left: 28px;
                   input{
                    @include wh(45px, auto);
                   } 

                }

                &:nth-child(4) {
                    margin-left: 36px;

                }

                &:nth-child(5) {
                    margin-left: 37px;
                    span{
                        display: block;
                    }
                }
            }
        }
    }
}

js部分

var data = [{
       title: "新麦旗舰店",
       name: '星脉 纯种博美俊介活体宠物幼犬 正规犬舍繁殖 保证纯种健康 支持全国发货 ',
       yuan_price: 2000,
       now_price: 1800,
       num: 1,
       sum: 1800,
       img: './imges/1.jpg',
       isChecked: true,
   },

   {
       title: "美购国际专卖店",
       name: 'double yellow荷兰猪活体天竺鼠豚鼠家养宠物鼠 棕色荷兰猪1只 送新手套餐',
       yuan_price: 100,
       now_price: 78,
       num: 1,
       sum: 78,
       img: './imges/2.jpg',
       isChecked: false,
   },
   {
       title: "美购国际专卖店",
       name: '美国短毛猫活体 美国短幼猫活体 猫咪活体美短加白起司 起司加白 公/精品',
       yuan_price: 5420,
       now_price: 5200,
       num: 2,
       sum: 10400,
       img: './imges/3.jpg',
       isChecked: true,

   },
   {
       title: "美购国际专卖店",
       name: 'Lauren杭州猫舍 布偶猫活体 蓝双色布偶猫 可爱仙女猫活体幼猫 杭州地区可',
       yuan_price: 9200,
       now_price: 8999,
       num: 1,
       sum: 8999,
       img: './imges/4.jpg',
       isChecked: true,
   },
   {
       title: "美购国际专卖店",
       name: "土炮哥宠物 纯种蓝猫蓝胖子 英短猫咪活体 英国短毛猫 幼猫 1999/只/客服专",
       yuan_price: 2100,
       now_price: 1999,
       num: 1,
       sum: 1999,
       img: './imges/5.jpg',
       isChecked: false,
   }
];
getHtml();
//封装渲染
function getHtml() {

   var a = '';
   var main = document.getElementsByClassName('main')[0];
   for (var i in data) {
       a += ` <ul class ='ul2'>
 <li>
     <input type="checkbox" name="" id="">
     <span>星脉旗舰店</span>
 </li>
 <li>
     <p>
         <input type="checkbox" name="" id="concheck"  ${data[i].isChecked ? 'checked' :''}>      
         <img src="${data[i].img}" alt="">
         <span>${data[i].name}</span>
     </p>
     <p>${data[i].now_price}</p>
     <p>
         <button class= 'sub'>-</button>
         <input type="text" name="" id="ipt" value='${data[i].num}'>
         <button class= 'add'>+</button>

     </p>
     <p><b class='sum1'>${data[i].sum}</b></p>
     <p>
         <span class= 'del'>删除</span>
         <span>移到我的关注</span>
     </p>
 </li>
</ul>`
   }
   main.innerHTML = a
   getEvent() //调用事件函数
}
//封装事件
function getEvent() {

   var adds = document.querySelectorAll('.add');
   var sums = document.querySelectorAll('.sum1');
   var subs = document.querySelectorAll('.sub');
   var ipts = document.querySelectorAll('#ipt');
   var all_checked = document.getElementById('allcheck');
   var e_checked = document.querySelectorAll('#concheck');
   var nums = document.querySelector('.num');
   var total_sums = document.querySelector('.sum');
   var dels = document.querySelectorAll('.del');
   var total_num = 0,
       total_sum = 0;
   //点击加
   for (var i = 0; i < adds.length; i++) {
       (function (ind) {
           adds[ind].onclick = function () {
               subs[ind].disabled = false;//启用减按钮
               var num = data[ind].num;//数据里的值赋值给num
               num++;//每次点击加一次
               ipts[ind].value = num;//把num的值写进input框
               data[ind].num = num; //更新里面的数据
               sums[ind].innerHTML = num * data[ind].now_price;//算出这项的和
               data[ind].sum = num * data[ind].now_price;// 更新数据
               getTotal(); //调用总价
           }
       })(i)
   }
   //减法与加法同理
   for (var i = 0; i < subs.length; i++) {
       (function (ind) {
           subs[ind].onclick = function () {
               var num = data[ind].num;
               num--;
               if (num <= 1) {
                   subs[ind].disabled = true;
               }
               ipts[ind].value = num;
               data[ind].num = num;
               sums[ind].innerHTML = num * data[ind].now_price;
               data[ind].sum = num * data[ind].now_price;
               getTotal();
           }
       })(i)
   }

   //全选
   all_checked.onclick = function () {
       var bool = all_checked.checked;  //记住全选的状态
       // console.log(bool)
       for (var i = 0; i < e_checked.length; i++) { 
           e_checked[i].checked = bool;//赋值给单选的每一个
           data[i].isChecked = bool;//更新数据状态
       }
       getTotal();
   }
   //单选
   for (var i = 0; i < e_checked.length; i++) { //循环找到哪一项
       (function (ind) {
           e_checked[ind].onclick = function () {
               data[ind].isChecked = e_checked[ind].checked //更新数据与每一个单选的状态一致
               var result = data.every(function (item) {//全部选中才返回true
                   return item.isChecked
               })
               all_checked.checked = result; //把结果给全选框
               getTotal();
           }
       })(i)

   }
   //已选和金额 
   getTotal(); 先调用

   function getTotal() { //封装已选商品和金额
       total_num = 0; 每次被调用先重置
       total_sum = 0;
       for (var i = 0; i < data.length; i++) { //循环数据
           if (data[i].isChecked) { //判断数据里的ischecked是true才执行
               total_num++   //声明数量变量
               total_sum += data[i].sum //声明总和变量，且保证里面的数据被更新过
           }
       }
       nums.innerHTML = total_num;  //分别写入数据
       total_sums.innerHTML = total_sum;
   }
   //删除
   for (var i = 0; i < dels.length; i++) {
       (function (ind) {
           dels[ind].onclick = function () {
               data.splice(ind, 1)//输出给定数组里面的数据
               getHtml()   //调用渲染 很重要
           }
       })(i)
   }

}