如何使jQuery立即在Pageload上运行

Question

我有以下jQuery，它检查了2个输入中是否有内容(这是带有用户名和密码的登录页面(，如果有内容，则添加类"使用"的类。

$(window, document, undefined).ready(function() {
  $('input').blur(function() {
    var $this = $(this);
    if ($this.val())
      $this.addClass('used');
    else
      $this.removeClass('used');
  });
});

问题在于，在页面上有单击事件后，仅将类used添加到第二个输入中。如果我单击页面的任何部分，它将添加类used。

第一个输入(用户名(重点放在页面加载上，并且它正确获取类，而密码字段除非我单击某个地方，否则密码字段没有获得类used，否则除非我将重点放在输入中。

缺少什么？我该如何使jQuery在页面加载后立即检测到输入上的内容？

Answer 1

这是因为您正在使用模糊事件。只有在元素失去焦点时才会发射 - 在您提到的情况下，因为您单击了其他地方

我希望两个输入(用户名和密码(如果它们的内容中有"使用"类

如果这是您的意图，则可以将逻辑提取到页面加载时调用的函数以及元素的值更改时。我还强烈建议您使用input事件为此，因为它涵盖了使用鼠标的所有关键事件和粘贴内容。

$(function() {
  $('input').on('input', setClass).each(setClass);
  function setClass() {
    $(this).toggleClass('used', $(this).val().trim() != '');
  }
});

input { width: 50px; }
.used { border: 1px solid #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" value="" />
<input type="text" value="aaa" />
<input type="text" value="" />
<input type="text" value="bbb" />

请注意，我已经对您的逻辑进行了一些修正。首先，我使用了标准文档。您的原始内容是不必要的。其次，您可以为toggleClass()提供布尔值，而无需if条件。

Answer 2

尝试一下，在map以及each loop

中获取所有input元素

$('input').on('keypress', function() {
  $("input").map(function() {
    var $this = $(this);
    if ($this.val())
      $this.addClass('used');
    else
      $this.removeClass('used');
  });
});