您的位置:首页 > Web前端 > JQuery

JQuery之 加減(Part9)

2019-04-15 10:20 621 查看

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

效果如下:

說明:

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

css

[code]	.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:

[code]
<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:

[code]<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>

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: