javascript - 根据影响 div 中所有类的类更改 $(this) 输入字段颜色

Question

我有这个 HTML 在一个页面上多次出现:

<div class="canteen-item">
    <div class="col-l">
        <h4>Chicken Sandwich</h4>
        <p>$<span class="canteen-price">3.50</span></p>
    </div>
    <div class="col-r">
        <div class="qty-days">
            <input name="Mon" class="qty-input" value="0" maxlength="2" />
            <input name="Tue" class="qty-input" value="0" maxlength="2" />
            <input name="Wed" class="qty-input" value="0" maxlength="2" />
            <input name="Thu" class="qty-input" value="0" maxlength="2" />
            <input name="Fri" class="qty-input" value="0" maxlength="2" />
        </div>
    </div>
</div>

我有这个 JQuery 来检测输入字段何时更改，如果值大于 0，则将颜色更改为红色。

$(".qty-input").change(function(){
    var qty = parseInt($(this).val());
    if(qty > 0){
        $(this).css('color','red');
    }
    else{
        $(this).css('color','black');
    }
});

它的行为非常不可预测。当我更改第一个输入字段(星期一)的值时，它使所有 5 个输入都变为红色。然后有时它会在几天内完全不同的行中将颜色改回黑色。看起来是一个很容易解决的问题，但很难解决。

Answer 1

问题是这段代码:

var qty = $(this).val();

返回一个字符串。这段代码将该字符串与数字进行比较

if(qty > 0){

尝试将第一行代码更改为:

if ($(this).val()) {
    var qty = parseInt($(this).val(), 10);
}

它应该开始更一致地工作，但您还需要验证输入是否全是数字。