博主信息
富贵人生
博文
87
粉丝
0
评论
0
访问量
3461
积分:0
P豆:174

【前端】手机端页面购物车功能JS如何实现产品数量,商品价格去相加减。

2021年10月08日 23:41:43阅读数:24博客 / 富贵人生

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>购物车</title><meta name="description" content=""><meta name="keywords" content=""><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="renderer" content="webkit"><meta http-equiv="Cache-Control" content="no-siteapp" /><link rel="icon" type="image/png" href="https://segmentfault.com/theme/default/images/favicon.png"><link href="https://segmentfault.com/q/1010000007600978/css/amazeui.min.css" rel="stylesheet" type="text/css" /><link href="https://segmentfault.com/q/1010000007600978/css/style.css" rel="stylesheet" type="text/css" /><script src="https://segmentfault.com/q/1010000007600978/js/jquery-1.10.2.min.js"></script></head><body><header data-am-widget="header" class="am-header am-header-default sq-head "><div class="am-header-left am-header-nav"><a href="javascript:history.back()" class=""><i class="am-icon-chevron-left"></i></a></div><h1 class="am-header-title"><a href="" class="">购物车</a></h1></header><div></div><!--购物车空的状态--><div class="login-logo">购物车的logo图位置<p>亲、您的购物车还是空空的哦,快去装满它!</p><a href="https://segmentfault.com/q/1010000007600978/index.html" class="goshopping">前去逛逛</a></div><ul class="shopcart-list"><li><label class="am-checkbox am-warning"><input type="checkbox" checked="checked" value="" data-am-ucheck checked></label><a href="https://segmentfault.com/q/1010000007600978/detail.html"><img src="https://segmentfault.com/q/1010000007600978/images/test3.png" class="shop-pic" /></a><div class="shop-list-mid"><div class="tit"><a href="https://segmentfault.com/q/1010000007600978/detail.html">法国加力果12个装 进口新鲜水果 嘎啦苹果 包邮</a></div><div class="d-stock"><a class="decrease">-</a><input id="num" readonly class="text_box" name="" type="text" value="1"><a class="increase">+</a></div></div><b class="shop-list-price">¥169 </b><div class="del"><i class="am-icon-trash"></i></div></li><li><label class="am-checkbox am-warning"><input type="checkbox" checked="checked" value="" data-am-ucheck checked></label><a href="https://segmentfault.com/q/1010000007600978/detail.html"><img src="https://segmentfault.com/q/1010000007600978/images/test3.png" class="shop-pic" /></a><div class="shop-list-mid"><div class="tit"><a href="https://segmentfault.com/q/1010000007600978/detail.html">法国加力果12个装 进口新鲜水果 嘎啦苹果 包邮</a></div><div class="d-stock"><a class="decrease">-</a><input id="num" readonly class="text_box" name="" type="text" value="1"><a class="increase">+</a></div></div><b class="shop-list-price">¥169 </b><div class="del"><i class="am-icon-trash"></i></div></li><li><label class="am-checkbox am-warning"><input type="checkbox" checked="checked" value="" data-am-ucheck checked></label><a href="https://segmentfault.com/q/1010000007600978/detail.html"><img src="https://segmentfault.com/q/1010000007600978/images/test3.png" class="shop-pic" /></a><div class="shop-list-mid"><div class="tit"><a href="https://segmentfault.com/q/1010000007600978/detail.html">法国加力果12个装 进口新鲜水果 嘎啦苹果 包邮</a></div><div class="d-stock"><a class="decrease">-</a><input id="num" readonly class="text_box" name="" type="text" value="1"><a class="increase">+</a></div></div><b class="shop-list-price">¥169 </b><div class="del"><i class="am-icon-trash"></i></div></li><li><label class="am-checkbox am-warning"><input type="checkbox" checked="checked" value="" data-am-ucheck checked></label><a href="https://segmentfault.com/q/1010000007600978/detail.html"><img src="https://segmentfault.com/q/1010000007600978/images/test3.png" class="shop-pic" /></a><div class="shop-list-mid"><div class="tit"><a href="https://segmentfault.com/q/1010000007600978/detail.html">法国加力果12个装 进口新鲜水果 嘎啦苹果 包邮</a></div><div class="d-stock"><a class="decrease">-</a><input id="num" readonly class="text_box" name="" type="text" value="1"><a class="increase">+</a></div></div><b class="shop-list-price">¥169 </b><div class="del"><i class="am-icon-trash"></i></div></li><div></div></ul><div class="shop-fix"><label class="am-checkbox am-warning"><input type="checkbox" checked="checked" value="" data-am-ucheck checked></label><a class="del">批量删除</a><a href="https://segmentfault.com/q/1010000007600978/tureorder.html" class="js-btn">去结算</a><div class="js-text"><P>合计:<b>¥217.80</b></P><p class="js-car">某某快递配送</p></div></div><!--底部--><div></div><div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default sq-foot am-no-layout" id=""><ul class="am-navbar-nav am-cf am-avg-sm-4"><li><a href="https://segmentfault.com/q/1010000007600978/index.html" class="curr"><span class="am-icon-home"></span><span class="am-navbar-label">首页</span></a></li><li><a href="https://segmentfault.com/q/1010000007600978/category.html" class=""><span class="am-icon-th-large"></span><span class="am-navbar-label">分类</span></a></li><li><a href="https://segmentfault.com/q/1010000007600978/shopcart.html" class=""><span class="am-icon-shopping-cart"></span><span class="am-navbar-label">购物车</span></a></li><li><a href="https://segmentfault.com/q/1010000007600978/member.html" class=""><span class="am-icon-user"></span><span class="am-navbar-label">我的信息</span></a></li></ul></div><script>//购物数量加减$(function(){
$('.increase').click(function(){var self = $(this);var current_num = parseInt(self.siblings('input').val());
current_num += 1;
self.siblings('input').val(current_num);
update_item(self.siblings('input').data('item-id'));
})
$('.decrease').click(function(){var self = $(this);var current_num = parseInt(self.siblings('input').val());if(current_num > 1){
current_num -= 1;
self.siblings('input').val(current_num);
update_item(self.siblings('input').data('item-id'));
}
})
})</script><script src="https://segmentfault.com/q/1010000007600978/js/jquery.min.js"></script><script src="https://segmentfault.com/q/1010000007600978/js/amazeui.min.js"></script></body></html>

这是我的手机端页面代码,我不会用JS写最后的总价。希望各路大神能给个解决办法。

回答

$(function(){
   $('.increase').click(function(){        var self = $(this);//      var price=self[0].parentNode.parentNode.nextElementSibling;
       var current_num = parseInt(self.siblings('input').val());
       current_num += 1;
       self.siblings('input').val(current_num);//      update_item(self.siblings('input').data('item-id'));
       gettotal();//这里调用
   })        
   $('.decrease').click(function(){        var self = $(this);        var current_num = parseInt(self.siblings('input').val());        if(current_num > 1){
           current_num -= 1;
           self.siblings('input').val(current_num);//          update_item(self.siblings('input').data('item-id'));
       }
       gettotal();//这里调用
   })//  function change(e,val){//        e.innerHTML=val;//    }
   function gettotal(){//就是这个函数获取总的数量,并乘以单价,再修改总价,然后再加和减的方法内调用
       var num=0;        for(var i=0,len=$(".text_box").length;i<len;i++){
           num += parseFloat($(".text_box")[i].value);            var zongnum=num*169;
               $(".js-text p b")[0].innerHTML=zongnum;
       }
   }
})

ps:楼主,问问题真是一门学问,你这劈头盖脸的一篇吓跑了多少人?还有,QQ号码购买地图你这html的层级嵌套,真心让人蛋疼,还好你是用的jq框架,要是你们老大让你用原生js,就这不合理的层级dome操作都得把你累死。你这需求是动态改变每个输入框类的数字,然后再乘 以单价,再相加获得总的金额对吧?你也不说清楚,搞得我以为是动态改变每个输入框后面的金额,并把总的金额相加…

直接贴代码太简单粗暴了。

<b class="shop-list-price">¥169 </b>这个到底是单价还是商品单价*数量呢

我看你js也没有写关于数量变化涉及到这里值的变化,姑且认为是单价吧。

计算最后的总价,无非就是写成一个function sum, 然后当你点击加减按钮那些触发事件的时候,都是调用一下sum即可。

而sum的逻辑,无非就是遍历一下dom里记录商品的单价跟数量,然后加起来咯。(不知道你那还有没有快递费啥的)

ps: 手机版用jquery,不会觉得太大么? jquery的引入都放到业务js的下边去了 ,不会怕业务js访问不到jquery么?

另外 ,题主不考虑手动修改数量的触发么?


版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论