社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

当输入到达值时,Jquery不应用效果

Lucas Silva • 6 年前 • 2268 次点击  

当输入到达带有按钮的值时,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/#

有人能帮我一下吗?

提前谢谢!

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/48525
文章 [ 2 ]  |  最新文章 6 年前
fdehanne
Reply   •   1 楼
fdehanne    7 年前

点击后 .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 ,只需在开头使用一个,它将根据测试的数量值进行添加。

Dante
Reply   •   2 楼
Dante    7 年前

我可以给你一个逻辑

使用“one”而不是“on”为按钮添加一个事件侦听器,使该值最初为零。

还要添加一个条件,即只有在输入字段中没有输入值时,它才应该工作。 谢谢