JQuery之 加減（Part9）

今天來講一個點擊加則加一，點擊-則減一的功能編寫。

效果如下：

說明：

最小為1，最大為10，自己也可以更改的哈。

css

	.buy .com_symbol {
	height:20px;
	color:#FFF;
	font-weight:500;
	text-align:center;
	display:inline-block;
	padding:0 10px;
	line-height:20px;
	cursor:pointer;
}
.buy .com_symbol:hover {
	background:#556986;
	color:#FFF;
}
.buy {
	min-width:30%;
	max-width:50%;
	background:#475a76;
	color:#8baadb;
	height:20px;
	display: inline-block;
	text-align:center;
	line-height:20px;
}

 jq：

 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
	var purchase = '';
	$(function () {
		$('.reduce').click(function () {
			if (purchase == '' || purchase == null || purchase == 0) {
				var purchase = $('.purchase').text();
			}
			if (purchase == '1') {
				return false;
			}
			if (purchase < 10) {
				$('.tishi').text('');
			}
			var res = parseInt(purchase) - 1;
			$('.purchase').text(res);
		})
		$('.plus').click(function () {
			if (purchase == '' || purchase == null || purchase == 0) {
				var purchase = $('.purchase').text();
			}
			if (purchase > 10 || purchase == 10) {
				$('.tishi').text('XXX');
				return false;
			}
			var res = parseInt(purchase) + 1;
			$('.purchase').text(res);
		})
	})
</script>

HTML：

<div class="buy">
		<span class="fl">
			<div class="reduce com_symbol">-</div>
		</span>
		<span class="purchase">1</span>
		<span class="fr">
			<div class="plus com_symbol">+</div>
		</span>
	</div>