2 回答

TA貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個(gè)贊
再次閱讀您的問(wèn)題后,我想我明白了。如果輸入大于 0,則您希望錨點(diǎn)為紅色。否則,默認(rèn)返回灰色。
您可以通過(guò)將示例腳本轉(zhuǎn)換為函數(shù)并將其添加到加號(hào)和減號(hào)事件來(lái)實(shí)現(xiàn)此目的。
$(document).ready(function() {
function color() {
if ($(".input-number").val() > 0) {
$('.quantity-minus').css('background', '#f00');
} else {
$('.quantity-minus').css('background', '#999');
}
}
$('.quantity-plus').click(function(e) {
$(this).prev().val(+$(this).prev().val() + 1);
color();
e.preventDefault();
});
$('.quantity-minus').click(function(e) {
if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);
color();
e.preventDefault();
});
});
.quantity-minus {
background: #999;
color: #fff;
padding: 5px;
}
.quantity-plus {
background: green;
color: #fff;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group qty-addon">
<a href="javascript:void(0);" class="quantity-minus">
minus
</a>
<input type="text" id="" name="" class="input-number" value="0">
<a href="javascript:void(0);" class="quantity-plus" data-type="plus" data-field="">
plus
</a>
</div>

TA貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊
單擊minus按鈕時(shí)需要重置背景顏色,目前僅在plus單擊按鈕時(shí)更改顏色,
$(document).ready(function(){
$('.quantity-plus').click(function (e) {
$(this).prev().val(+$(this).prev().val() + 1);
e.preventDefault();
});
$('.quantity-minus').click(function (e) {
if ($(this).next().val() > 1){
$(this).next().val(+$(this).next().val() - 1);
e.preventDefault();
} else {
$(this).next().val(0);
$('.quantity-minus').css('background', '#999');
}
});
});
$('.quantity-plus').click(function() {
if($(".input-number").val() > 0){
//alert();
$('.quantity-minus').css('background', '#f00');
}
else {
$('.quantity-minus').css('background', '#999');
}
});
.quantity-minus {
background: #999;
color: #fff;
padding: 5px;
}
.quantity-plus {
background: green;
color: #fff;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group qty-addon">
<a href="javascript:void(0);" class="quantity-minus">
minus
</a>
<input type="text" id="" name="" class="input-number" value="0">
<a href="javascript:void(0);" class="quantity-plus" data-type="plus" data-field="">
plus
</a>
</div>
另一種方法是您可以在每次單擊任何按鈕時(shí)觸發(fā) onchange 輸入,然后根據(jù)值更改按鈕的顏色。
$(document).ready(function() {
$('.quantity-plus').click(function(e) {
$(this).prev().val(+$(this).prev().val() + 1);
e.preventDefault();
$('#input').change()
});
$('.quantity-minus').click(function(e) {
if ($(this).next().val() > 1) {
$(this).next().val(+$(this).next().val() - 1);
e.preventDefault();
} else {
$(this).next().val(0);
}
$('#input').change()
});
});
function handle() {
if ($(".input-number").val() > 0) {
//alert();
$('.quantity-minus').css('background', '#f00');
} else {
$('.quantity-minus').css('background', '#999');
}
}
.quantity-minus {
background: #999;
color: #fff;
padding: 5px;
}
.quantity-plus {
background: green;
color: #fff;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group qty-addon">
<a href="javascript:void(0);" class="quantity-minus">
minus
</a>
<input type="text" id="input" name="" class="input-number" value="0" onchange="handle()">
<a href="javascript:void(0);" class="quantity-plus" data-type="plus" data-field="">
plus
</a>
</div>
添加回答
舉報(bào)