Question

我正在构建一个简单的if语句，如果输入值超过6，则使用Jquery更改P元素的颜色。但是当输入值超过2时，它会更改吗？

$("#input_5_11").keyup(function() {     
  if ($('#input_5_11').val() > 6) {
    $("p").css("color", "red")
  }
});

Answer 1

您正在比较字符串和整数。使用parseInt()将val()强制为整数：

$("#input_5_11").keyup(function() {     
  if ((parseInt($(this).val(), 10) || 0) > 6) {
    $("p").css("color", "red")
  }
});

还请注意使用|| 0将NaN的结果强制转换为0，以免破坏比较。

Answer 2

当前与字符串进行比较时，可以使用javascript的Number函数。

$("#input_5_11").keyup(function() {     
  if (Number($(this).val()) > 6) {
      $("p").css("color", "red").text('now I am Red');
  }
  else{
     $("p").css("color", "green").text('back to green');
  }
});

p{
  color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input_5_11" value="4"/>
<p>I am green initially</p>

Answer 3

 $("#input_5_11").keyup(function() {     
      if (+($(this).val()) > 6) {
        $("p").css("color", "red")
      }
  });

只需将输入的字符串值解析为整数即可将其转换/解析为数字。

Answer 4

尝试一下：实际上，您并没有将p颜色重置为默认颜色。另外，只有数字会导致颜色改变，非数字字符会将颜色重置为默认值

$("#input_5_11").keyup(function() {  
        var v = parseInt($(this).val());
        v = (!isNaN(v)) ? v:0;
        if (v > 6) {
            $("p").css("color", "red")
        } else {
            $("p").css("color", "black"); // or any default color
        }     
});

            
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input id="input_5_11" />
    <p>I am p tag</p>

jQuery val（）编号不正确？

4 个答案: