jQuery：检查两个输入字段值是否> 0答案

【问题标题】：jQuery: Check if both input field values are > 0jQuery：检查两个输入字段值是否> 0
【发布时间】：2016-03-07 19:26:05
【问题描述】：

自从几周前我开始使用 jQuery 以来，我仍然需要一些支持。

我必须输入字段（类型=数字）。如果两个输入字段值都被填写（两个，而不仅仅是一个），并且它们大于 0。应该显示一个隐藏元素。

我想出了这个......但我想我不明白每个循环......

到目前为止，这是我的代码。提前致谢！

$('#container').on('input', '.sides', function(){ 
    $.each($('input[type=number]'),function(){
    	if(this.value > 0){
      	$('#content').removeClass('hidden');
      } else {
      	$(this).addClass('marker');
      }
    });   
});

.hidden {
  display:none;
}
.marker {
  border:3px solid red;
  background:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="container">
<input type="number" class="sides" id="side_a">
<input type="number" class="sides" id="side_b">

<div class="hidden" id="content">
<h1>
Hello :)
</h1>
</div>
</div>

【问题讨论】：

标签： jquery validation input

【解决方案1】：

您可以使用filter 获取符合您条件的inputs 列表 - 然后与总长度进行比较：

var hasFilledInEverything = $('input[type=number]').filter(function() {
    return this.value > 0;
}).length == $('input[type=number]').length;

if (hasFillerInEverything) {
    //add class
} else {
    //remove
}

【讨论】：

非常感谢。这个过滤器功能非常方便:)

【解决方案2】：

这里不需要$.each() 调用，您只需获取input 事件中两个input 元素的值并比较它们即可。试试这个：

$('#container').on('input', '.sides', function() {
  var aValue = $('#side_a').val();
  var bValue = $('#side_b').val();
  if (aValue > 0 && bValue > 0) {
    $('#content').removeClass('hidden');
  } else {
    $('#content').addClass('hidden');
    $(this).addClass('marker');
  }
});

.hidden {
  display: none;
}
.marker {
  border: 3px solid red;
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="container">
  <input type="number" class="sides" id="side_a">
  <input type="number" class="sides" id="side_b">

  <div class="hidden" id="content">
    <h1>
Hello :)
</h1>
  </div>
</div>

【讨论】：

我知道，但是这段代码只是一个大表格的原型。所以我想用相同的条件验证具有相同类的每个输入字段。
在这种情况下，@tymeJV 发布的解决方案更适合您的要求。

【解决方案3】：

每个就像一个 for 循环。所以该代码等于：

for( i = 0; i < $('input[type=number]').length; i++{
  if($('input[type=number]')[i] > 0){
    $('#content').removeClass('hidden');
  } else {
    $('input[type=number]')[i].addClass('marker');
  }
}

基本上，您没有考虑该代码中的两个输入。如果你要使用$each，你需要一个辅助变量来跟踪你的结果，并在循环之后根据它进行操作

【讨论】：

感谢您的解释。我不知道.. :)