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);
}

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

Answer 2

使用change event target来获取元素

＆＃13;

$(document).ready(function() {
  $(".qty-input").change(function(e) {
    var target = e.target;
    var qty = $(target).val();
    if (qty > 0) {
      $(target).css('color', 'red');
    } else {
      $(target).css('color', 'black');
    }
    alert("value is " + qty)
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 type="text" name="Mon" class="qty-input" value="0" maxlength="2" />
      <input type="text" name="Tue" class="qty-input" value="0" maxlength="2" />
      <input type="text" name="Wed" class="qty-input" value="0" maxlength="2" />
      <input type="text" name="Thu" class="qty-input" value="0" maxlength="2" />
      <input type="text" name="Fri" class="qty-input" value="0" maxlength="2" />
    </div>
  </div>
</div>

＆＃13;

Answer 3

感谢所有回复。它促使我深入挖掘我在不同的JS文件中发现了另一段代码，它正在尝试（错误地！）做同样的事情。我上面的代码实际上是完美的，并且工作得很好。我为浪费任何人在这里的时间而道歉。我没有意识到我的客户有一个开发人员已经尝试过这样做（以及谁也将代码放在错误的文件中）。

根据影响div中所有类的类更改$（this）输入字段颜色

3 个答案: