javascript - 怎样让价格重新叠加?

问题描述

问 题

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

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

解决方案

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

需求再细化一下吧、

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

提供思路：

首先这个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的变化都要考虑进去

这篇关于javascript - 怎样让价格重新叠加?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！