Question

我的IF语句非常类似于这个小提琴：

我想知道的是，如果所有具有alert()类的div具有超过1000的值，而不仅仅是第一个实例，我如何才显示.ccn。我尝试了each()功能，但我不太清楚如何使用它。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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事件。

然后，当用户输入这些输入时，您可以逐个验证每个输入，看看是否所有输入都满足您的条件（＆gt; 1000）。虽然每次用户输入时验证值都不太好。您可能需要一个油门功能，以便您可以在每个持续时间内检查它们的值。

Answer 2

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

另请注意，您应该使用parseInt和base（基数）将输入转换为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>

如果语句仅适用于第一个实例

3 个答案: