15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页

html5 商品数量加减

孙正萌| 发布于 2022-05-30 16:14:17| 430阅读| 0点赞| 0评论
举报

商品数量加减。小于0隐藏减


html


<div class="pInfo">
                      <dl>
                         <dt><h3>商务套餐h3>dt>
                         <dd><a href="#"><img src="/images/c01.jpg" />a>dd>
                         <dd>
                             <em class="sale">
                                 <b>特价b>0.01元/份<br />
                                 <del>15元/份del>
                             em>
                         dd>
                         <dd class="btn">
                             <button class="minus">
                                 <strong>strong>
                             button>
                             <i>0i>
                              <button class="add">
                                 <strong>strong>
                             button>
                             <i class="price">0.01i>
                         dd>
                     dl>
div>

<div class="footer">
			<div class="left">
				已选:<span id="cartN">
					<span id="totalcountshow">0span>份 总计:¥<span id="totalpriceshow">0span>
				span>元
			div>
			<div class="right">
				<a id="btnselect" class="xhlbtn  disable" href="javascript:void(0)" οnclick="btnSelectJump();">选好了a>
			div>
		div>

css


.pInfo{padding:5px;}
.pInfo dl{position:relative;padding-left:60px;height:75px;border-bottom:1px solid #e7eaeb;border-top:1px solid #fff;padding-bottom:8px;margin-bottom:2px;}
.pInfo dl dt h3{font-size:14px;margin-bottom:10px;margin-top:8px;}
.pInfo dl dd{margin-left:0;font-size:11px;position:relative;z-index:1;}
.pInfo dl dd img{height:55px;width:55px;position:absolute;left:-60px;top:-25px;border-radius:3px;cursor:pointer;vertical-align:middle;border:0;}
.pInfo dl dd em{font-style:normal;line-height:10px;font-size:11px;vertical-align:bottom;}
.pInfo dl dd em.sale{color:#f00;}
.pInfo dl dd del{color:#b2b2b2;font-size:10px;line-height:22px;}
.pInfo dl dd.btn{background-color:transparent;position:absolute;right:-5px;top:25%;cursor:pointer;padding:3px;height:38px;}
.pInfo dl dd.btn button.minus{margin-right:-10px;display:none;}
.pInfo dl dd.btn button{width:40px;height:40px;border:0;background:transparent;padding:0;}
.pInfo dl dd.btn button strong{padding:5px 10px;font-size:15px;display:inline-block;text-indent:-100px;padding:5px 11px;height:12px;}
.pInfo dl dd.btn button.minus strong{background:url(images/jianhao.png) no-repeat;background-size:22px 22px;}
.pInfo dl dd.btn i{display:none;width:22px;text-align:center;font-style:normal;vertical-align:top;margin-top:11px;line-height:18px;}
 
.pInfo dl dd.btn button.add{margin-left:-10px;}
.pInfo dl dd.btn button.add strong{background:url(images/jiahao.png) no-repeat;background-size:22px 22px;}
.pInfo dl dd.btn .price{display:none;}
 
.footer{display:block;position:fixed;padding:5px 0;width:100%;z-index:3;bottom:0px;color:#f03c03;background:#fff;line-height:35px;font-size:15px;border-top:1px solid #e2e2e2;}
.footer .left{float:left;margin-left:10px;}
.footer .right{float:right;margin-right:10px;}
.footer .right .disable{background:#dbdbdb;}
.footer .xhlbtn{display:block;text-align:center;background-color:#F03C03;padding:0 15px;border-radius:20px;color:#fff;font-weight:bold;}

js


<script>
	$(document).ready(function () {           
	//加的效果
	$(".add").click(function () {
		$(this).prevAll().css("display", "inline-block");
		var n = $(this).prev().text();
		var num = parseInt(n) + 1;
		if (num == 0) { return; }
		$(this).prev().text(num);
		
		var danjia = $(this).next().text();//获取单价
		var a = $("#totalpriceshow").html();//获取当前所选总价
		$("#totalpriceshow").html((a * 1 + danjia * 1).toFixed(2));//计算当前所选总价
		
		var nm = $("#totalcountshow").html();//获取数量
		$("#totalcountshow").html(nm*1+1);
		jss();//改变按钮样式

	});
	//减的效果
	$(".minus").click(function () {
		var n = $(this).next().text();
		var num = parseInt(n) - 1;

		$(this).next().text(num);//减1

		var danjia = $(this).nextAll(".price").text();//获取单价
		var a = $("#totalpriceshow").html();//获取当前所选总价
		$("#totalpriceshow").html((a * 1 - danjia * 1).toFixed(2));//计算当前所选总价
	   
		var nm = $("#totalcountshow").html();//获取数量
		$("#totalcountshow").html(nm * 1 - 1);
		//如果数量小于或等于0则隐藏减号和数量
		if (num <= 0) {
			$(this).next().css("display", "none");
			$(this).css("display", "none");
			jss();//改变按钮样式
			 return
		}
		
	});
	function jss() {
		var m = $("#totalcountshow").html();
		if (m > 0) {
			$(".right").find("a").removeClass("disable");
		} else {
		   $(".right").find("a").addClass("disable");
		}
	}
});
script>
0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

孙正萌
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部