根据输入值增量更改按钮颜色

Question

下面的示例我想在输入值 > 1 时更改减号按钮背景颜色。同时当输入值 = 0 时，它应该是默认背景颜色。

评论以进一步澄清。

我试过的脚本：

$('.quantity-plus').click(function() {

    if($(".input-number").val() > 0){           

            //alert();

        $('.quantity-minus').css('background', '#f00');

    }

    else {

        $('.quantity-minus').css('background', '#999');

    }               

});

$(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() > 0) $(this).next().val(+$(this).next().val() - 1);

    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>

Answer 1

再次阅读您的问题后，我想我明白了。如果输入大于 0，则您希望锚点为红色。否则，默认返回灰色。您可以通过将示例脚本转换为函数并将其添加到加号和减号事件来实现此目的。$(document).ready(function() {&nbsp; function color() {&nbsp; &nbsp; if ($(".input-number").val() > 0) {&nbsp; &nbsp; &nbsp; $('.quantity-minus').css('background', '#f00');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $('.quantity-minus').css('background', '#999');&nbsp; &nbsp; }&nbsp; }&nbsp; $('.quantity-plus').click(function(e) {&nbsp; &nbsp; $(this).prev().val(+$(this).prev().val() + 1);&nbsp; &nbsp; color();&nbsp; &nbsp; e.preventDefault();&nbsp; });&nbsp; $('.quantity-minus').click(function(e) {&nbsp; &nbsp; if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);&nbsp; &nbsp; color();&nbsp; &nbsp; e.preventDefault();&nbsp; });});.quantity-minus {&nbsp; background: #999;&nbsp; color: #fff;&nbsp; padding: 5px;}.quantity-plus {&nbsp; background: green;&nbsp; color: #fff;&nbsp; padding: 5px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="input-group qty-addon">&nbsp; &nbsp; <a href="javascript:void(0);" class="quantity-minus">&nbsp; &nbsp; &nbsp; &nbsp; minus&nbsp; &nbsp; </a>&nbsp; &nbsp; <input type="text" id="" name="" class="input-number" value="0">&nbsp; &nbsp; <a href="javascript:void(0);" class="quantity-plus" data-type="plus" data-field="">&nbsp; &nbsp; &nbsp; &nbsp; plus&nbsp; &nbsp; </a></div>

Answer 2

单击minus按钮时需要重置背景颜色，目前仅在plus单击按钮时更改颜色，$(document).ready(function(){&nbsp; &nbsp;&nbsp; $('.quantity-plus').click(function (e) {&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $(this).prev().val(+$(this).prev().val() + 1);&nbsp; &nbsp; e.preventDefault();&nbsp; });&nbsp; $('.quantity-minus').click(function (e) {&nbsp; &nbsp; if ($(this).next().val() > 1){&nbsp; &nbsp; &nbsp; $(this).next().val(+$(this).next().val() - 1);&nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp;$(this).next().val(0);&nbsp; &nbsp; &nbsp; &nbsp;$('.quantity-minus').css('background', '#999');&nbsp; &nbsp; }&nbsp; });});$('.quantity-plus').click(function() {&nbsp; &nbsp; if($(".input-number").val() > 0){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //alert();&nbsp; &nbsp; &nbsp; &nbsp; $('.quantity-minus').css('background', '#f00');&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; $('.quantity-minus').css('background', '#999');&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});.quantity-minus {&nbsp; background: #999;&nbsp; color: #fff;&nbsp; padding: 5px;}.quantity-plus {&nbsp; background: green;&nbsp; color: #fff;&nbsp; padding: 5px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="input-group qty-addon">&nbsp; &nbsp; <a href="javascript:void(0);" class="quantity-minus">&nbsp; &nbsp; &nbsp; &nbsp; minus&nbsp; &nbsp; </a>&nbsp; &nbsp; <input type="text" id="" name="" class="input-number" value="0">&nbsp; &nbsp; <a href="javascript:void(0);" class="quantity-plus" data-type="plus" data-field="">&nbsp; &nbsp; &nbsp; &nbsp; plus&nbsp; &nbsp; </a></div>另一种方法是您可以在每次单击任何按钮时触发 onchange 输入，然后根据值更改按钮的颜色。$(document).ready(function() {&nbsp; $('.quantity-plus').click(function(e) {&nbsp; &nbsp; $(this).prev().val(+$(this).prev().val() + 1);&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; $('#input').change()&nbsp; });&nbsp; $('.quantity-minus').click(function(e) {&nbsp; &nbsp; if ($(this).next().val() > 1) {&nbsp; &nbsp; &nbsp; $(this).next().val(+$(this).next().val() - 1);&nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $(this).next().val(0);&nbsp; &nbsp; }&nbsp; &nbsp; $('#input').change()&nbsp; });});function handle() {&nbsp; if ($(".input-number").val() > 0) {&nbsp; &nbsp; //alert();&nbsp; &nbsp; $('.quantity-minus').css('background', '#f00');&nbsp; } else {&nbsp; &nbsp; $('.quantity-minus').css('background', '#999');&nbsp; }}.quantity-minus {&nbsp; background: #999;&nbsp; color: #fff;&nbsp; padding: 5px;}.quantity-plus {&nbsp; background: green;&nbsp; color: #fff;&nbsp; padding: 5px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="input-group qty-addon">&nbsp; <a href="javascript:void(0);" class="quantity-minus">&nbsp; &nbsp; &nbsp; &nbsp; minus&nbsp; &nbsp; </a>&nbsp; <input type="text" id="input" name="" class="input-number" value="0" onchange="handle()">&nbsp; <a href="javascript:void(0);" class="quantity-plus" data-type="plus" data-field="">&nbsp; &nbsp; &nbsp; &nbsp; plus&nbsp; &nbsp; </a></div>