静态页面购物车数量加减功能实现

1.进行“加”的效果时:一定要注意:获取单价和数量是禁止使用id或者class选择器,要使用add的选择器去寻找单价和数量的值

HTML:

<div class="col-xs-7">
<p>什锦小郡肝套餐</p>
<p style="height: 90px"></p>
<p style="color: red;font-size: 45px;">
<span>¥</span>
<span class="price">16</span>
<span class="glyphicon glyphicon-plus add"></span>
<i>0</i>
<span class="glyphicon glyphicon-minus minud"></span>
</p>
</div>

JS:

// 加号的效果
$(‘.add‘).click(function(){

// 1.先获取份数
var n = $(this).next().text();
// 2.将获取的份数转化为数字格式
var num = parseInt(n) + 1;
if(num == 0){return; }
// 3.将减号和份数元素显示
$(this).next().show();
$(this).next().next().show();
// 4.将份数赋值给i标签
$(this).next().text(num);
// 5.获取单价
var price = $(this).prev().text();
// 6.获取当前所选总价
var a = $(".totalpriceshow").html();
// 7.计算当前所选总价 toFixed(num):js表示将Number四舍五入为指定的小数位数的数字
$(".totalpriceshow").html((a * 1 + price * 1).toFixed(2));
});

// 减号的效果
$(‘.minud‘).click(function(){

// 1.获取份数
var n = $(this).prev().text();
// 2.将份数转化为数字格式
var num = parseInt(n) - 1;
if(num < 0){

$(this).prev().text()-1;
}
// 4.将份数赋值给i标签
$(this).prev().text(num);
// 5.获取单价
var price = parseInt($(‘.price‘).text());
var price = $(this).prev().prev().prev().text();
// 6. 获得当前的总价
var totalPrice =parseInt($(".totalpriceshow").html());

// 7.将总价赋值给尾部的总价元素标签
$(".totalpriceshow").html((totalPrice - price).toFixed(2));
// 8.将减号和份数元素显示
if(num == 0){

$(this).prev().hide();
$(this).hide();
return;
}
});

原文地址:https://www.cnblogs.com/hym33/p/9934820.html

时间: 2024-08-27 01:30:46

静态页面购物车数量加减功能实现的相关文章

文本框数量加减功能

此功能相当于购物车加减功能: <p class="_stepper"> <input class="stepper_input" data-bind="value:orderInfo.PrintNumber,event:{ change: GetPrintNumber}" type="number" id="printNumber" value="1"/> <

jquery实现文本框数量加减功能的例子分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js jquery 权限单选 bug修改以及正确代码 购物车数量加减

效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javascript:;" class="minus" onclick="delpubls(this)">-</a> <input type="number" style="min-height: 20px;font

jquery实现购物车数量加减,价格计算功能

HTML代码: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <meta http-equiv="X-UA-Co

购物车数量加减代码

.amount-wrap .icon{ display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; border: 1px solid #cdcdcd; background-color: #eee; vertical-align: middle; } .amount-wrap .icon-minus { border-right: 0; } .amount-wrap .icon

购物车商品数量加减

<span class="cut ">-</span>                <input class="number" type="text" value="1">     <span class="add">+</span> <script>/*购物车商品数量加减*/$(function(){           $(&qu

自己动手丰衣足食之 jQuery 数量加减插件

引言 做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些原理还不是很懂,比如说插件函数入口.插件内如何编写私有函数.如何调用含参私有函数.如果在使用插件时提示参数.都还需要一一去摸索. jQuery实现方式 1.类级别插件开发. $.ajax(). 2.对象级别插件开发.  $("div").highlight(). 3.jquery UI提供

在axure中实现商品数量加减效果,原型库网站讲师-金乌 解答同学问

有同学在群里提问,如何使用axure制作商品数量增加减少效果,见GIF图.虽然属于初级教程,但很多同学还是小白新手阶段,所以特地录制了详细的视频讲解,供大家学习参考! 该教程由原型库网站录制http://www.yuanxingku.com转载请注明出处! 在axure中实现商品数量加减效果,原型库网站讲师-金乌 解答同学问,布布扣,bubuko.com

jQuery实现购物车数字加减效果

效果图: jQuery实现购物车数字加减效果,方法本简单. 经常会写到购物车这块,而购物车很多就有加减这个效果(可以将HTML代码复制多个,同时支持),小小的总结了一下,代码如下: HTML: <div class="gw_num"> <em class="jian">-</em> <input type="text" value="1" class="num"/&