js购物车计算和删除(较为常见)

最新推荐文章于 2023-08-29 00:29:05 发布
小番水源
最新推荐文章于 2023-08-29 00:29:05 发布
阅读量2k
点赞数 7
分类专栏： js 文章标签： javascript html 前端
本文链接：https://blog.csdn.net/weixin_43368552/article/details/126415261
版权
js 专栏收录该内容
47 篇文章 0 订阅
订阅专栏
主要是执行删除操作的时候，商品数量和小计，需要重新获取才能计算总价
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>购物车全选功能</title>
  <!-- 引入初始化 -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: #666;
    }

    body {
      background: #fff;
      color: #666;
      font-size: 14px;
    }

    input {
      outline: none;
    }

    .clearfix::before,
    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }
  </style>
  <!-- 引入购物车样式 -->
  <style>
    table {
      width: 800px;
      margin: 0 auto;
      border-collapse: collapse;
    }

    th {
      font: normal 14px/50px '宋体';
      color: #666;
    }

    th,
    td {
      border: none;
      text-align: center;
      border-bottom: 1px dashed #ccc;
    }

    input[type='checkbox'] {
      width: 13px;
      height: 13px;
    }

    tbody p {
      position: relative;
      bottom: 10px;
    }

    tbody .add,
    tbody .reduce {
      float: left;
      width: 22px;
      height: 22px;
      border: 1px solid #ccc;
      text-align: center;
      background: none;
      outline: none;
      cursor: pointer;
    }

    tbody input[type='text'] {
      width: 50px;
      float: left;
      height: 18px;
      text-align: center;
    }

    tbody .count-c {
      width: 98px;
      margin: 0 auto;
    }

    button[disabled] {
      color: #ddd;
      cursor: not-allowed;
    }

    tbody tr:hover {
      background: #eee;
    }

    tbody tr.active {
      background: rgba(241, 209, 149, 0.945);
    }

    .controls {
      width: 790px;
      margin: 10px auto;
      border: 1px solid #ccc;
      line-height: 50px;
      padding-left: 10px;
      position: relative;
    }

    .controls .del-all,
    .controls .clear {
      float: left;
      margin-right: 50px;
    }

    .controls p {
      float: right;
      margin-right: 100px;
    }

    .controls span {
      color: red;
    }

    .controls .pay {
      position: absolute;
      right: 0;
      width: 80px;
      height: 54px;
      background: red;
      font: bold 20px/54px '宋体';
      color: #fff;
      text-align: center;
      bottom: -1px;
    }

    .controls .total-price {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <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>
  <script>
    // + -和删除都是相同的，一一对应的  我们完全可以用一个for循环来遍历绑定事件
    // +
    let adds = document.querySelectorAll('.add')  //注意需要拿到全部的+号，使用querySelectorAll
    // -
    let reduces = document.querySelectorAll('.reduce')
    // 删除
    let dels = document.querySelectorAll('.del')
    // 输入框
    let inputs = document.querySelectorAll('.count-c input')

    // 单价
    let prices = document.querySelectorAll('.price')
    // 小计
    let totals = document.querySelectorAll('.total')
    // 获取总价
    let totalResult = document.querySelector('.total-price')
    // 获取总件数
    let totalCounts = document.querySelector('#totalCount')
    // 获取carBody
    let carBody = document.querySelector('#carBody')


    for (let i = 0; i < adds.length; i++) {
      totals[i].innerHTML = prices[i].innerHTML    //点击+按钮和—按钮之前！！，，，单价等于总价
      //i 意味着获取到全部的+号的长度，进行事件监听之前设置全部的i里面的prices等于totals
      // 同时 totals[i].innerHTML=prices[i].innerHTML  只能在for遍历之后，再等于；；如果在for外面等于因为没能获取到具体是哪个，无法赋值

      // 1.加号的操作
      adds[i].addEventListener('click', function () {
        // alert(11)
        inputs[i].value++
        // ++之后启动减号   因为你++之后数量就不再是1，减号启动
        reduces[i].disabled = false
        // console.log(typeof prices[0]);
        // console.log(prices[i]);  //获取第i个的价格，你点击第几个，就获取第几个的价格数据
        // console.log(prices[i].innerHTML);
        // console.log(parseInt(prices[i].innerHTML));  //parseInt解析为数字整型

        // 计算小计
        // totals[i].innerHTML = 单价 * 数量
        totals[i].innerHTML = parseInt(prices[i].innerHTML) * inputs[i].value + '￥'  //后面 + '￥'即可
        //计算现在的总额   调用  result()
        result()

      })


      // 2.减号的操作
      reduces[i].addEventListener('click', function () {
        // alert(11)
        inputs[i].value--
        // ++之后启动减号   因为你++之后数量就不再是1，减号启动
        // reduces[i].disabled = false
        // console.log(typeof prices[0]);
        // console.log(prices[i]);  //获取第i个的价格，你点击第几个，就获取第几个的价格数据
        // console.log(prices[i].innerHTML);

        // console.log(parseInt(prices[i].innerHTML));  //parseInt解析为数字整型
        // 判断如果表单里面的值     小于等于1时则，禁用按钮
        if (inputs[i].value <= 1) {
          this.disabled = true
        }

        // 计算小计
        // totals[i].innerHTML = 单价 * 数量
        totals[i].innerHTML = parseInt(prices[i].innerHTML) * inputs[i].value + '￥'  //后面 + '￥'即可
        //计算现在的总额   调用  result()
        result()

      })


      // 3. 删除操作
      dels[i].addEventListener('click', function () {

        // 父元素.removeChild(子元素)
        // 找到我们需要删除的元素   tr  这样才能找到需要删除的父级，删除元素需要通过父元素删除
        // carBody.removeChild(this.children[i])或者carBody.removeChild(carBody.children[i])   因为你绑定的是dels[i],你直接使用this或者carBody是不起效果的，需要动态找到该元素进行删除

        carBody.removeChild(this.parentNode.parentNode)
        // 删除之后，重新调用总件和总价
        result()
      })


      // 计算总价result 函数   把所有的小计totals加起来的结果
      function result() {
        // 重新获取输入框
        let inputs = document.querySelectorAll('.count-c input')
        //重新获取小计
        let totals = document.querySelectorAll('.total')

        let sum = 0
        let num = 0
        for (let i = 0; i < totals.length; i++) {
          // sum = sum + 小计的数字  
          sum = sum + parseInt(totals[i].innerHTML)
          num = num + Number(inputs[i].value)  //还可以使用number转换为数字型
        }
        console.log(num);
        totalCounts.innerHTML = num
        totalResult.innerHTML = sum + '￥'
      }
      result()




    }


  </script>
</body>

</html>