Как установить условие, чтобы моя функция продолжалась, если все значения верны?

Question

Я хочу запустить новую функцию, когда все .numbers равны true. Если один false, я хочу остановить функцию после того, как он обнаружил, что все неправильно. .numbers это столбец в моей таблице. Я хочу проверить, верны ли они. Я не знаю, как этого добиться. Вы можете мне помочь?

$("#clickit").click(function() {
  $(".numbers").filter(function() {
    if ($.isNumeric($(this).text()) === false) {
      $(this).css("background-color", "red");
      return false;
    } else {
      alert("out1");
    }
  });
});

Answer 1

Есть несколько способов сделать это, вот один из вариантов:

• найти все недействительные числа и присвоить им класс
• проверить, есть ли элементы с этим классом

это можно объединить, но для простоты рассмотрите их как две различные проверки:

$(".numbers").each(function() {
   $(this).toggleClass("notvalid", !$.isNumeric($(this).text()));
});

if ($(".numbers.notvalid").length === 0)
  // ok to continue

Демонстрационный фрагмент:

$(".numbers").each(function() {
   $(this).toggleClass("notvalid", !$.isNumeric($(this).text()));
});


// Example usage
if ($(".numbers.notvalid").length === 0)
    $("#out").text("all pass");
else 
    $("#out").text("not all passed");

.notvalid { background-color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><td>Line1</td><td class='numbers'>123</td></tr>
<tr><td>Line2</td><td class='numbers'>abc</td></tr>
<tr><td>Line3</td><td class='numbers'>456</td></tr>
<tr><td>Line4</td><td class='numbers'>789</td></tr>
<table>
<hr/>
<div id="out"></div>

---

Чтобы обновить вашу попытку, .filter может использоваться для возврата отфильтрованного списка, возвращая true (сохранить в списке) / false (удалить из списка). Так как вам не нужно проверять, сколько их было, чтобы сравнить, вы можете вернуть, сколько не удалось (аналогично приведенному выше), давая:

$("#clickit").click(function() {
  if ($(".numbers").filter(function() {
    if ($.isNumeric($(this).text()) === false) {
      $(this).css("background-color", "red");
      return true;
    } else {
      // reset the "red" ones - this is easier with add/remove class
      $(this).css("background-color", "white");
      return false;
    }
  })).length === 0) {
    // none have an error, ok to continue
  }
});

Answer 2

Существует другое решение, вы можете count число недействительных text, если оно равно нулю, это означает, что все ваши text равны true

$("#clickit").click(function() {
  invalid = 0;
  $(".numbers").filter(function() {
    if (!$.isNumeric($(this).text())) {
      invalid++;
      $(this).css("background-color", "red");
      return false;
    }
  });
  if (invalid === 0) {
    alert('all set!')
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="numbers">2</td>
      <td class="numbers">1</td>
      <td class="numbers">1</td>
      <td class="numbers">3</td>
    </tr>
  </tbody>
</table>

<button id="clickit">Check</button>

Answer 3

Вы можете установить флаг для этого:

$("#clickit").click(function() {
  let flag = 0;
  $(".numbers").filter(function() {
    if ($.isNumeric($(this).text()) === false) {
      $(this).css("background-color", "red");
      flag++;
    } else {
      $(this).css("background-color", ""); // Remove the css as well.
    }
  });
  if (flag) {
    //error handling.
  } else {
    //continue your logic
  }
});