jquery every 防止警报循环

Question

首先看一下这段代码。示例我有 5 个具有必需类的输入字段。

var errMsg = "This is required!"

$(function() {
   $(".required").each(function() {
      if($(this).val() == "" || $(this).val == errMsg) {
         $(this).val(errMsg);
      }
      else {
         alert("This should alert once");
      }
   });
}

我知道如果该字段有值，它会提醒5次。我该如何预防？我怎样才能提醒它一次？我已经使用了

event.stopImmediatePropagation
event.preventDefault

Answer 1

尚不完全清楚您要做什么。两种选择:

1. 停止each循环:

   您可以停止 each通过返回 false 进行循环:

   var errMsg = "This is required!"
   
   $(function() {
      $(".required").each(function() {
         if($(this).val() == "" || $(this).val == errMsg) {
            $(this).val(errMsg);
         }
         else {
            alert("This should alert once");
            return false; // <=== Stop `each`
         }
      });
   }
   

   参见the documentation了解详情。

2. 设置标志:

   如果您希望循环继续，但警报仅发生一次，请使用标志:

   var errMsg = "This is required!"
   
   $(function() {
      var alerted = false;
      $(".required").each(function() {
         if($(this).val() == "" || $(this).val == errMsg) {
            $(this).val(errMsg);
         }
         else {
            if (!alerted) {
                alerted = true;
                alert("This should alert once");
            }
         }
      });
   }
   

   如果这样做(让循环继续)，请参阅 Guffa's answer 。他将提醒移到了 each 之外，这样您就可以更灵活地呈现消息，而且更加简洁。

<小时/>

离题:每次调用 $() 时，它都会进行 3-4 次函数调用并分配内存。如果您发现自己在函数中重复相同的 $()，请考虑执行一次并重用它。所以代替:

if($(this).val() == "" || $(this).val == errMsg) {
    $(this).val(errMsg);
}

这样做

var $this = $(this);
if($this.val() == "" || $this.val == errMsg) {
    $this.val(errMsg);
}

大多数时候这并不重要，因为您不会重复执行某件事数千次，但这是一个值得养成的好习惯。显然，如果您正在执行 DOM 查询并且 DOM 可能在一次调用和下一次调用之间发生了变化，则不要缓存结果...