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

Question

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

     <div class="td td-amount">
          <div class="clearfix amount-bar">
            <div class="fl amount-cont-bar line-solid">
               <a id="amount-decrease-btn" class="line-solid-r amount-decrease-btn" href="javascript:;">-</a>
               <input id="amount-total-num" type="text" value="1" readonly="readonly" />
               <a id="amount-add-btn" class="line-solid-l amount-add-btn" href="javascript:;">+</a>
            </div>
            <div class="clearfix"></div>
            <div class="sl_xz">有货</div>
        </div>
     </div>
     <!--数量-->
    
     <!--小计-->
     <div class="td td-sum">
          <b class="sn-price price-color">
             <i>￥</i>
             <em>99.00</em>
          </b>
     </div>
     

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);

});
})

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

Answer 1

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

$('.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()*'单价');
});

Answer 2

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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