javascript - 像苏宁易购那样，点击增加数量或者减少数量，后面还有一个根据数量算出来的总额，应该怎么写？-PHP中文网问答

问题：像苏宁易购那样，点击增加数量或者减少数量，后面还有一个根据数量算出来的总额，应该怎么写？
代码：
布局：

css部分：
/数量/
.amount-cont-bar{width:120px;+width:124px;height: 30px;line-height: 30px;}
.amount-cont-bar a{width: 30px;height: 30px;font-weight: bold;}
.amount-cont-bar a,.amount-cont-bar input{font-size: 21px;font-family: "宋体";text-align: center;color: #666;}
.amount-cont-bar input{width: 50px;height: 27px;line-height: 27px;font-size: 14px;font-family: "Microsoft yahei";position: relative;top: -1px;+top: -2px;border: none;outline: none;}
.amount-cont-bar a:hover{color: #f00;font-weight: bold;}
.amount-decrease-btn,.amount-add-btn{+position: relative;+top: -5px;}
.amount-add-btn{position: relative;left: 1px;}
.td-amount .amount-bar .amount-cont-bar{margin-left:68px;}
.td-amount .amount-bar .sl_xz{width:122px;height:32px;line-height:32px; text-align:center;float:right;}

/小计/
.gwc_lb_xq .item .td-sum{width:126px;padding:10px 0 0 56px;word-wrap:break-word;word-break:break-all; overflow:hidden;}
.price-color{color:red;}

js部分：
//数量
$(function(){
var oJian_btn = $("#amount-decrease-btn"),

  oAdd_btn = $("#amount-add-btn"),
  oTotal_val = $("#amount-total-num");

//加的效果
oAdd_btn.click(function(){
var n=oTotal_val.val();
var num=parseInt(n)+1;
if(num==0){ return;}

 oTotal_val.val(num);

});
//减的效果
oJian_btn.click(function(){
var n=oTotal_val.val();
var num=parseInt(n)-1;
if(num==0){ return}

 oTotal_val.val(num);

});
})

目的：点击加号或者减号，后面的小计能根据单价变化，想不出应该怎么写。
网上也没有相关实例。

$('.amount-cont-bar').on('click', 'a', function() { if ($(".amount-cont-bar a").index($(this))==0) { $("#amount-total-num").val($("#amount-total-num")--); }else{ $("#amount-total-num").val($("#amount-total-num")++); } $(".sn-price em").text($("#amount-total-num").val()*'单价'); });

全部回复(5)

ringa_lee2017-04-11 13:17:08 5楼

这种需求就是你每做一次加减操作，都会触发一次总价更新。不要关注你是加还是减，你要关注的是当前物品数量。

赞 +0

添加回复

高洛峰2017-04-11 13:17:08 4楼

没看出来有什么难的？
点击加号或者减号数量发生变化，单价是不变的，用单价乘变化后的数量覆盖原来的总价不就行了

ringa_lee2017-04-11 13:17:08 3楼

用dom操作获取前面一个元素的innerHtml（价格），然后才乘以数字输入框里的value值，然后赋值给总价呀

阿神2017-04-11 13:17:08 2楼

获取显示价格的那个元素节点，动态改变他的值就可以了：
function price(){

pricedom.innerhtml=$("#amount-total-num).value*2499;

},
再将该方法在点击加减的那两个个方法内分别调用就OK了

PHP中文网2017-04-11 13:17:08 1楼

这种一般都会在cookie或者其他存储容器里面进行相关数据内容信息存储，然后在绑定相关dom元素事件监听，发生变化，改变数据，获取数据开始计算，结果填充.