当输入到达带有按钮的值时,jquery不应用效果
我有一个表单,用户可以在输入字段中插入数量。当你手动插入数字,我也希望它和按钮一起工作,但我就是不能让它工作。
代码如下:
$('.qty').blur(function(){
tmpval = $(this).val();
if(tmpval == '50') {
$('.copo50').addClass('copocheck');
} else {
$('.copo50').removeClass('copocheck');
}
if ((tmpval == '100') || (tmpval == '200') || (tmpval == '300') || (tmpval == '400') ){
$('.copo100').addClass('copocheck');
} else {
$('.copo100').removeClass('copocheck');
}
if ((tmpval == '500') || (tmpval == '600') || (tmpval == '700') || (tmpval == '800') || (tmpval == '900') ){
$('.copo500').addClass('copocheck');
} else {
$('.copo500').removeClass('copocheck');
}
if ((tmpval > 999) ){
$('.copo5001000').addClass('copocheck');
} else {
$('.copo5001000').removeClass('copocheck');
}
});
$(function () {
$('.add').on('click',function(){
var $qty=$(this).closest('p').find('.qty');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal)) {
$qty.val(currentVal + 50); }
if (!isNaN(currentVal) && currentVal > 99) {
$qty.val(currentVal + 100); }
});
$('.minus').on('click',function(){
var $qty=$(this).closest('p').find('.qty');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal) && currentVal > 1) {
$qty.val(currentVal - 50);
}
if (!isNaN(currentVal) && currentVal > 100) {
$qty.val(currentVal - 100);
}
});
});
.copocheck {color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group spin">
<label class="control-label" for="input-quantity">QUANTITY:</label>
<p>
<button class="btn btn-default minus">-</button>
<input type="text" name="quantity" max="1000" value="0" size="2" id="troca" class="qty form-control" style="width: 60%;display: inline-block;"/>
<button class="btn btn-default add" data-dir="up">+</button>
</p>
<div class="tabelas">
<table style=' font-family: Roboto Cn; font-size: 17px; width: 100%;' border='0' cellspacing='0' cellpadding='4' align='left'><tbody><tr class='cor copo50'><td>50 Copos</td><td>R$ 2,00 <em>a unidade</em></td></tr><tr class='cor copo100'><td>100 - 400 Copos</td><td>R$ 1,30 <em>a unidade</em></td><tr class='cor copo500'><td>500 - 900 Copos</td><td>R$ 1,15 <em>a unidade</em></td></tr><tr class='cor copo5001000'><td>1000 Copos</td><td>R$ 1,00 <em>a unidade</em></td></tr></tbody></table>
</div>
这里是jsfiddle:
https://jsfiddle.net/vh1Lcr3x/#
有人能帮我一下吗?
提前谢谢!