Question

当输入通过按钮达到值时，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&nbsp;Copos</td><td>R$ 2,00 <em>a unidade</em></td></tr><tr class='cor copo100'><td>100 - 400&nbsp;Copos</td><td>R$ 1,30 <em>a unidade</em></td><tr class='cor copo500'><td>500 - 900&nbsp;Copos</td><td>R$ 1,15 <em>a unidade</em></td></tr><tr class='cor copo5001000'><td>1000&nbsp;Copos</td><td>R$ 1,00&nbsp;<em>a unidade</em></td></tr></tbody></table>
                      </div>

这里是jsfiddle：https://jsfiddle.net/vh1Lcr3x/#

有人可以帮我吗？

谢谢！

Answer 1

我可以给你逻辑

为按钮添加事件监听器，使用“ ONE”（而不是“ ON”）将值初始设置为零。

还添加条件，使其仅在输入字段中未输入任何值时才起作用。谢谢

Answer 2

点击.add和.minus之后，您必须执行在qty字段中键入时所使用的相同代码。

因此，您可以创建这样的函数：

function quantityUpdated()
{
    tmpval = $('.qty').val();

    $('.cor').removeClass('copocheck');

    if (tmpval == '50')
        $('.copo50').addClass('copocheck');

    if ((tmpval == '100') || (tmpval == '200')  || (tmpval == '300') || (tmpval == '400') )
        $('.copo100').addClass('copocheck');

    if ((tmpval == '500') || (tmpval == '600')  || (tmpval == '700') || (tmpval == '800') || (tmpval == '900') )
        $('.copo500').addClass('copocheck');

    if ((tmpval > 999) )
        $('.copo5001000').addClass('copocheck');
}

然后您像这样使用它：

$('.qty').blur(function() {
    quantityUpdated();
});

$('.add').on('click',function() {
    // You current code
    // [...]
    quantityUpdated();
});

$('.minus').on('click',function() {
    // You current code
    // [...]
    quantityUpdated();
});

PS：在quantityUpdated()中不需要很多removeClass，只需在开始时使用一个，它将根据测试中的数量值添加。

当输入到达值时，jQuery无效

2 个答案: