js数量加减效果

最新推荐文章于 2022-03-25 14:43:49 发布

幸福滴嘴角上扬

最新推荐文章于 2022-03-25 14:43:49 发布

阅读量6.8k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/xiangxiangw29/article/details/54140556

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

之前做***航空项目时，在酒店预订功能中用到了预订房间的增加、删除，今天见有人在小程序群里问到这个问题，所以简单整理了个demo，供大家参考。

.room-number{
				margin-bottom: 30px;
			}
			.desc,.bd-box{
				float: left;
			}
			.desc{
			    width: 80px;
				height: 36px;
				font-size: 16px;
			    line-height: 36px;
			    margin-right: 10px;
			        
			}
			.bd-box{
			    height: 35px;
			    line-height: 35px;
			    text-align: center;
			    vertical-align: middle;
			    background: #fff;
			}
			.addition,.subtraction{
			    width: 17px;
			    padding: 0 6px;
			    color: #727171;
			    font-size: 18px;
			    cursor: pointer;
			    border: 1px solid #d3d3d3;
			}
			.addition{
				border-left: 0px;
			}
			.subtraction{
				border-right: 0px;
			}
			.number-box{
				width: 122px;
			    border: 1px solid #d3d3d3;
			}
			.room-name{
			    width: 80px;
		        height: 30px;
    			line-height: 30px;	
    			float: left;
			    font-size: 16px;
				text-align: right;
				margin-right: 8px;
			}
			.required{
				color: red;
    			margin-right: 4px;
			}
			.customer{
				padding: 6px 8px;
				border: 1px solid #d3d3d3;
			}

<body>
		<div class="con">
			<div class="room-number">
				<p class="clearfix">
					<span class="desc">房间数量：</span>
					<span class="bd-box subtraction min">-</span>
					<input class="bd-box number-box" value="1" readonly="readonly"/>
					<span class="bd-box addition add">+</span>
				</p>
			</div>
			<div class="room-desc">
				<p class="room">
					<span class="room-name"><i class="required">*</i>房间1：</span>
					<input class="customer" type="text" placeholder="姓名，只需填写一位"></input>
				</p>
			</div>
		</div>
	</body>

<script>
	$(function(){	
		/*单击加号按钮增加房间*/
		$(".add").click(function(){ 
			var add = $(this).siblings(".number-box"); 
			add.val(parseInt(add.val())+1) 
			addRoom();
		}); 
		
		/*单击减号按钮减少房间*/
		$(".min").click(function(){ 
			var min = $(this).siblings(".number-box"); 
			min.val(parseInt(min.val())-1) 
			if(parseInt(min.val())<1){ 
				min.val(1);
			}
		/*删除最后一个房间*/
		$(".room2:last").remove();
		}); 
		
		function addRoom(){
			var num = $(".number-box").val();
			var html = "";
			html+="<p class='room room2' style='margin-top:20px'>";
			html+="<span class='room-name'><i class='required'>*</i>房间";
			html+=num;
			html+="：</span>";
			html+="<input class='customer' type='text' placeholder='姓名，只需填写一位'";
			html+="</p>";
			$(".room:last").append(html);
		}
	});
</script>

记得先加载jquery文件，若有更好的实现方案欢迎讨论。