js基础-购物车操作

目标：购物车操作

掌握webApi DOM基础操作

实现要求：

要求：

1. 实现“加”按钮点击，数量增加 减号按钮重启 小计计算
2. 实现“减”按钮点击，数量减少 减号按钮判断数量 小计计算
3. 总数计算 还要总计数量
4. 删除操作

实现步骤：

考察DOM基础、封装函数

实现：

1. 加和减点击事件
2. 每一行数据的小计实现：单价*数量 （）
3. 总量和总数计算（封装函数）因为加减删除操作都要计算总数
4. 删除操作

注意点：

1、调用函数时必须重新获取小计和input的value 因为删除事件时应该获取最新的小计的长度

 <div class="car">
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" id="all" />全选</th>
          <th>商品</th>
          <th>单价</th>
          <th>商品数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="carBody">
        <tr>
          <td>
            <input class="s_ck" type="checkbox" readonly />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">5￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">5￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">10￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">20￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">20￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">40￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>牛奶</p>
          </td>
          <td class="price">35￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">70￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="controls clearfix">
      <a href="javascript:" class="del-all">删除所选商品</a>
      <a href="javascript:" class="clear">清理购物车</a>
      <a href="javascript:" class="pay">去结算</a>
      <p>
        已经选中<span id="totalCount">0</span>件商品;总价：<span id="totalPrice" class="total-price">0￥</span>
      </p>
    </div>
  </div>

 // 购物车实现步骤
    

    // 1、获取元素
    let add = document.querySelectorAll('.add');
    let reduce = document.querySelectorAll('.reduce');
    let del = document.querySelectorAll('.del');
    let input = document.querySelectorAll('.count-c input');
    let price = document.querySelectorAll('.price');
    let total = document.querySelectorAll('.total');
    let totalPrice = document.querySelector('#totalPrice');
    let totalCount = document.querySelector('#totalCount');
    let carBody = document.querySelector('#carBody');
    
    // 2、增加减少按钮点击事件
    for(let i = 0; i < add.length; i++) {
      //让小计的值先等于单价的钱
      total[i].innerText = price[i].innerText;
      // 加事件
      add[i].addEventListener('click', function() {
          input[i].value++;
          reduce[i].disabled = false;
          //计算每一行小计总价
          // 小计的价格 = 单价 * 数量
          total[i].innerHTML = parseInt(price[i].innerText) * input[i].value + '￥';
          priceToltal()
      })
      // 减事件
      reduce[i].addEventListener('click', function() {
          input[i].value--;
          // 判断减按钮小于1时禁用
          if (input[i].value <= 1) {
            this.disabled = true;
          }
          //计算每一行小计总价
          // 小计的价格 = 单价 * 数量
          total[i].innerHTML = parseInt(price[i].innerText) * input[i].value + '￥';
          priceToltal()
      })
      // 删除事件
      del[i].addEventListener('click', function() {
        //删除一行  
        carBody.removeChild(carBody.children[i]);
        priceToltal();
      })

    }
    //计算总价 把所有的小计获取过来  在删除和增加减少事件都用到，所以用封装函数
    function priceToltal() {
      // 注意点：调用函数时必须重新获取小计和input的value 因为删除事件时应该获取最新的小计的长度
      let total = document.querySelectorAll('.total');
      let input = document.querySelectorAll('.count-c input');
      // 求和
      let sum = 0;
      let num = 0;
      for (let i = 0; i < total.length; i++) {
        sum += parseInt(total[i].innerText);
        num += +input[i].value;
      }
      totalPrice.innerHTML = sum + '￥';
      totalCount.innerHTML = num;
    }
    priceToltal();
  </script>