jquery购物车代码简单理解

最新推荐文章于 2022-07-12 20:51:35 发布

Destiny is not doomed

最新推荐文章于 2022-07-12 20:51:35 发布

阅读量650

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_43730646/article/details/86439117

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

全选

商品

单价

数量

小计

操作

海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂

¥ 138.00

- +

¥ 138.00

删除

HLA海澜之家长袖衬衫男牛津纺休闲干净透气HNEAJ1E048A浅灰

¥ 128.00

- +

¥ 128.00

删除

HLA海澜之家牛津纺清新休闲衬衫2018春季新品质感柔软长袖衬衫男

¥ 99.00

- +

¥99.00

删除

}
})
// 为单个商品项删除超链接绑定事件回调
$(’.single-item a’).on(‘click’, function() {
if (window.confirm(‘确定要删除该项吗?’)) {
$(this).parent().parent().remove();
calcTotal();
}
});
// 为删除选中商品超链接绑定事件回调
$(’#clearSelected’).on(‘click’, function() {
if (window.confirm(‘确定要删除所选商品吗?’)) {
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots if ($ (this).find(‘input[name=“selectOne”]’).prop(‘checked’)) {
$(this).remove();
}
});
calcTotal();
}
});
// 为商品数量文本框绑定改变事件回调
$(’.single-item input[type=“text”]’).on(‘change’, function() {
// 当前这个对象是否被选中
$(t h i s) . p a r e n t () . p a r e n t () . f i n d (^{'} i n p u t [n a m e = " s e l e c t O n e "]^{'}) . p r o p (^{'} c h e c k e d^{'}, t r u e); v a r c o u n t = p a r s e I n t ($ (this).val());

      if (count != $(this).val() || count < 1 || count > 200) {
        conut = 1;
        $(this).val(count);
      }
      // 跟上面的一样
  var price = parseFloat($(this).parent().prev().find('span').text());
$(this).parent().next().html('&yen;' + (price * count).toFixed(2));
                calcTotal();
 });


    // 计算总计
      function calcTotal() { 
        // 定义为全选框
     var checkBoxes = $('input[name="selectOne"]');
     // 商品的单价
        var priceSpans = $('.single-item .price');
        // 这个是输入框
        var countInputs = $('.single-item .count');
        var totalCount = 0;
        var totalPrice = 0;
        // 循环遍历价钱
  for (var i = 0; i < priceSpans.length; i += 1) {
    // 复选框被勾中的购物车项才进行计算
      if ($(checkBoxes[i]).prop('checked')) {
      var price = parseFloat($(priceSpans[i]).text());
      // 定义价钱和数量
       var price = parseFloat($(priceSpans[i]).text());
        var count = parseInt($(countInputs[i]).val()); 
        totalCount += count;
        // 总价等于 数量 + 价格
         totalPrice += price * count;
      }
      }
      // 已选多少件商品
      $('#totalCount').text(totalCount);
      // 总价等于价钱  + 总结取整2位小数
       $('#totalPrice').html('&yen;' + totalPrice.toFixed(2));}
      
  })
           
        
        
    </script>