Изменить цвет кнопки на основе приращения входного значения

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

Вам нужно сбросить цвет фона, когда вы нажимаете кнопку minus, в настоящее время вы меняете цвет только при нажатии кнопки plus,

$(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>

---

Другой способ заключается в том, что вы можете запускать onchange при вводе при каждом нажатии любой кнопки, затем, в зависимости от значения, вы можете изменить цветкнопок.

$(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>

Answer 2

После прочтения вашего вопроса, я думаю, я понял. Если вход выше 0, вам нужен красный цвет привязки. В противном случае по умолчанию возвращается к серому.

Это можно сделать, превратив свой пример сценария в функцию и добавив его к событиям плюс и минус.

$(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>