javascript - 手机端页面购物车功能JS如何实现产品数量，商品价格去相加减。
本文介绍了javascript - 手机端页面购物车功能JS如何实现产品数量，商品价格去相加减。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!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="/theme/default/images/favicon.png">
<link href="css/amazeui.min.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="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 style="height: 49px;"></div>
<!--购物车空的状态-->
<div class="login-logo">
购物车的logo图位置
<p>亲、您的购物车还是空空的哦，快去装满它!</p>
<a href="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="detail.html"><img src="images/test3.png" class="shop-pic" /></a>
<div class="shop-list-mid">
<div class="tit"><a href="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="detail.html"><img src="images/test3.png" class="shop-pic" /></a>
<div class="shop-list-mid">
<div class="tit"><a href="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="detail.html"><img src="images/test3.png" class="shop-pic" /></a>
<div class="shop-list-mid">
<div class="tit"><a href="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="detail.html"><img src="images/test3.png" class="shop-pic" /></a>
<div class="shop-list-mid">
<div class="tit"><a href="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 style="height: 10px; background: #eee;"></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="tureorder.html" class="js-btn">去结算</a>
<div class="js-text">
<P>合计：<b>￥217.80</b></P>
<p class="js-car">某某快递配送</p>
</div>
</div>
<!--底部-->
<div style="height: 55px;"></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="index.html" class="curr">
<span class="am-icon-home"></span>
<span class="am-navbar-label">首页</span>
</a>
</li>
<li>
<a href="category.html" class="">
<span class="am-icon-th-large"></span>
<span class="am-navbar-label">分类</span>
</a>
</li>
<li>
<a href="shopcart.html" class="">
<span class="am-icon-shopping-cart"></span>
<span class="am-navbar-label">购物车</span>
</a>
</li>
<li>
<a href="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="js/jquery.min.js"></script>
<script src="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:楼主，问问题真是一门学问，你这劈头盖脸的一篇吓跑了多少人？还有，你这html的层级嵌套，真心让人蛋疼，还好你是用的jq框架，要是你们老大让你用原生js,就这不合理的层级dome操作都得把你累死。你这需求是动态改变每个输入框类的数字，然后再乘 以单价，再相加获得总的金额对吧？你也不说清楚，搞得我以为是动态改变每个输入框后面的金额，并把总的金额相加...
这篇关于javascript - 手机端页面购物车功能JS如何实现产品数量，商品价格去相加减。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
