If语句仅在第一个实例上有效

Question

我在这里有一个非常类似于这个提琴的IF语句：

http://jsfiddle.net/fz4wF/43/

我想知道的是，当.ccn类的所有div的值都超过1000时，我如何才能显示alert()，而不仅仅是第一个实例。我已经尝试过each()函数，但我不太确定如何使用它。

​

$(".ccn").keyup(function() {
  if ($(".ccn").val() >= 1000)
    alert('test');
});

<div class="cardNumber">
  <input type="text" value="" maxlength="4" name="ccn" class="ccn">
  <input type="text" value="" maxlength="4" name="ccn" class="ccn">
  <input type="text" value="" maxlength="4" name="ccn" class="ccn">
  <input type="text" value="" maxlength="4" name="ccn" class="ccn">
</div>

<ul>
  <li class="checkNumber">Card Number</li>
</ul>

​

Answer 1

尝试以下代码：

 $('.cnn').on('keyup', function() {
    flag = true;
    $.each($('.cnn'), function(index, input) {
        if (parseInt($(input).val()) <= 1000){
            flag = false
        }
    })

    if(flag) {
        alert();
    }
})

首先，您需要在这些输入元素上添加事件侦听器。当用户输入这些输入时，会触发keyup、keydown、change、input事件。

然后，当用户输入这些输入时，您可以逐个验证每个输入，看看它们是否都满足您的条件(>1000)。尽管这并不适合在每次用户输入时都验证值。您可能需要一个节流函数，以便您可以在每个持续时间检查它们的值。

Answer 2

使用.filter()，它将只返回那些通过函数中提供的条件的元素。

还要注意，您应该使用带有基数(基数)的parseInt来将输入强制转换为Integer

试试这个：

​

$(".ccn").keyup(function() {
  var len = $(".ccn").filter(function() {
    return parseInt($(this).val(), 10) >= 1000;
  }).length;
  if ($('.ccn').length == len) {
    alert('Passed');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="cardNumber">
  <input type="text" value="" maxlength="4" name="ccn" class="ccn">
  <input type="text" value="" maxlength="4" name="ccn" class="ccn">
  <input type="text" value="" maxlength="4" name="ccn" class="ccn">
  <input type="text" value="" maxlength="4" name="ccn" class="ccn">
</div>

<ul>
  <li class="checkNumber">Card Number</li>
</ul>

​

Answer 3

您可以像@jilykate建议的那样遍历所有的input元素，或者您也可以使用filter()来查看有多少元素具有所需的值，并将这些元素的数量与总数进行比较。您还需要使用parseInt()将从元素的值返回的字符串转换为用于比较的数字。试试这个：

​

$(".ccn").keyup(function() {
  var $ccn = $('.ccn');
  var $validCcn = $ccn.filter(function() {
    return parseInt(this.value, 10) >= 1000;
  });

  if ($ccn.length == $validCcn.length)
    alert('test');
});

<div class="cardNumber">
  <input type="text" value="" maxlength="4" name="ccn" class="ccn">
  <input type="text" value="" maxlength="4" name="ccn" class="ccn">
  <input type="text" value="" maxlength="4" name="ccn" class="ccn">
  <input type="text" value="" maxlength="4" name="ccn" class="ccn">
</div>

<ul>
  <li class="checkNumber">Card Number</li>
</ul>

​