怎样让价格重新叠加?

Question

一个价格变量，下面若干个按钮，分别代表不同套餐。 点击叠加切换套餐价格?
现在每次点击并不会把上次套餐的价格清掉。

<div id="price">100</div>
 <dl class="taocan"   >
        <dt >套餐:</dt >
        <dd class="btn" data-price="100" >套餐一</dd >
        <dd class="btn" data-price="200" >套餐二</dd >
        <dd class="btn" data-price="300" >套餐三</dd >
        <dd class="btn" data-price="400" >套餐四</dd >
</dl >

var price= $('#price');
$(".btn").each(function () {
    var sum = parseInt(price.text()); //总价
    var _that = $(this);
    var getPrice = parseInt(_that.attr('data-price')); //获取套餐价格
    _that.click(function () {
      $(this).addClass('active').siblings().removeClass('active');
      sum += getPrice;
      price.text(sum)
    })
  });

Answer 1

有点没太明白题主的意思、

需求再细化一下吧、

是类似复选的几个按钮吗？可以同时选多个套餐、再次点击就取消套餐是吗？

提供思路：

首先这个100是不固定的、不知道从哪来的

然后后面的四个套餐根据你的评论说法是单选

因为你的price可能会因为其他地方重新改变、所以不好做固定值去做计算

那最简单的方法就是在加新价格之前、从总价中减去上一个套餐的价格

var sum = parseInt(price.text()); //总价

_that.click(function () {
  var tmp = parseInt($(".active").attr('data-price'))
  $(this).addClass('active').siblings().removeClass('active');
  sum = sum - tmp + getPrice
  price.text(sum)
})

就是在active还未改变之前拿到上一个的值、做了减法之后给新的active

也可以不用上面的办法、

用两个变量控制价格、你现在的price是一个价格、再新定义一个price、不过这两个price的变化都要考虑进去

Answer 2

最好是每次点击都把总价清0重新计算一下。

这样业务多的时候不会很乱

做一个类似这样的价格存放类

function PriceCalc(initPrice) {
    this.initPrice = initPrice;
    this.addServer = {
        count : 1,  // 根据需要添加可能会出现价格变化的东西
    };
    this.setPrice = function(name, price) {
        if(this.addServer[name] === undefined) {  // 添加没有的项返回false
            return false;
        }
        this.addServer[name] = price;
        return this;
    }
    this.getPrice = function() {
        var count = this.initPrice;
        var asr = this.addServer;
        for(var i in asr) {
          count += asr[i];
        }
        return count;
    }
}