如何在單擊按鈕時一次比較所有欄位的值？

我有一個像下面這樣的 HTML 結構，

$(".zip-save").on('click', function(e) {
e.preventDefault();
var isFormValid = true;
var zip_start = $('.zip-first').val();
var zip_end = $('.zip-last').val();
console.log("start = "   zip_start   ",end = "   zip_end);
if (zip_start > zip_end) {
  $('.zip-last').css('border-color', 'rgba(218, 71, 58, 0.5)');
  $(this).parents('div').before("<p>zip-to value must be greater than zip-from</p>");
} else {
  $('.zip-last').css('border-color', 'rgba(33, 33, 33, 0.12)');
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
  <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
  <td><input type="number" placeholder="ZIP code BIS" class="form-control  zip-last" /></td>
</tr>
</br>
<tr>
  <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
  <td><input type="number" placeholder="ZIP code BIS" class="form-control  zip-last" /></td>
</tr>
</br>
<tr>
  <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
  <td><input type="number" placeholder="ZIP code BIS" class="form-control  zip-last" /></td>
</tr>
</br>
<button class="zip-save">Save</button>

在保存按鈕單擊功能上，我想檢查所有這些第一個 zip 欄位值是否小于最后一個 zip 欄位值，

我只能對第一個做同樣的事情<tr>，但是如何一次對所有的人做同樣的事情？

uj5u.com熱心網友回復：

您需要遍歷這些表行，而您只獲取第一行的值。我給了表一個類名，然后回圈遍歷 tr 標簽。還要注意這個語法： $(this).find('.zip-first').val()- 這個小加號將這個字串轉換成一個數字，這樣我就可以進行比較。另外，我在底部做了一個 div 來保存錯誤。

$(".zip-save").on('click', function(e) {
  e.preventDefault();
  let isFormValid = true;
  $('.zip-table tr').each(function() {
    let zip_start =  $(this).find('.zip-first').val()
    let zip_end =  $(this).find('.zip-last').val();
    // console.log("start = "   zip_start   ",end = "   zip_end);
    if (zip_start > zip_end) {
      $(this).find('.zip-last').css('border-color', 'rgba(218, 71, 58, 0.5)');
      $('.error').html("zip-to value must be greater than zip-from");
    } else {
      $(this).find('.zip-last').css('border-color', 'rgba(33, 33, 33, 0.12)');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='zip-table'>
<tr>
  <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
  <td><input type="number" placeholder="ZIP code BIS" class="form-control  zip-last" /></td>
</tr>
<tr>
  <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
  <td><input type="number" placeholder="ZIP code BIS" class="form-control  zip-last" /></td>
</tr>
<tr>
  <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
  <td><input type="number" placeholder="ZIP code BIS" class="form-control  zip-last" /></td>
</tr>
</table>
<div class='error'></div>
<button class='zip-save'>Save</button>

uj5u.com熱心網友回復：

考慮以下示例。

$(".zip-save").on('click', function(e) {
  e.preventDefault();
  var isFormValid = true;
  var zip_start;
  var zip_end;
  $("table tr").each(function(index, elem) {
    zip_start = parseInt($(".zip-first", elem).val());
    zip_end = parseInt($(".zip-last", elem).val());
    if (zip_start > zip_end) {
      console.log(zip_start, zip_end, "invalid");
      $('.zip-last', elem).removeClass("valid").addClass("invalid");
    } else {
      console.log(zip_start, zip_end, "valid");
      $('.zip-last', elem).removeClass("invalid").addClass("valid");
    }
  });
});

input.valid {
  border-color: rgba(33, 33, 33, 0.12;
}

input.invalid {
  border-color: rgba(218, 71, 58, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
    <td><input type="number" placeholder="ZIP code BIS" class="form-control  zip-last" /></td>
  </tr>
  <tr>
    <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
    <td><input type="number" placeholder="ZIP code BIS" class="form-control  zip-last" /></td>
  </tr>
  <tr>
    <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
    <td><input type="number" placeholder="ZIP code BIS" class="form-control  zip-last" /></td>
  </tr>
</table>
<button class="zip-save">Save</button>

我已經清理了你的 HTML 表格。您不應<br>在表格行內包含元素。我還用適當的<table>元素包裹了它。

正如所建議的，您必須遍歷每一行并檢查該行中的輸入。您可以使用$(elem).find(".zip-first")或簡寫$(".zip-first", elem). 輸入元素回傳一個字串值，因此為了更好的比較，最好將其轉換為整數。

有時根據需要添加或洗掉類會更好。您還可以使用.toggleClass("invalid")輕松添加/洗掉單個類。

查看更多：

• https://api.jquery.com/find/
• https://api.jquery.com/each/
• https://api.jquery.com/toggleclass/

標籤：javascript 查询

上一篇：收音機并選擇帶有警報的選項

下一篇：Bootstrap3輪播多個專案