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

问题描述

问 题

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

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

});
})

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

解决方案

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

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

这篇关于javascript - 像苏宁易购那样，点击增加数量或者减少数量，后面还有一个根据数量算出来的总额，应该怎么写？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！