Question

我有以下jquery，它检查2个输入中是否有内容（它是带有用户名和密码的登录页面）并添加了类＆＃34;使用了＆＃34;如果有内容。

$(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

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

我想要2个输入（用户名和密码）来使用＆＃34;使用＆＃34;如果他们有内容

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

请注意，我对您的逻辑进行了一些修改。首先，我使用了标准的document.ready处理程序。你的原作不必要地复杂化了。其次，您可以为toggleClass()提供布尔值，而无需if条件。

Answer 2

试试吧，获取input中的所有map元素以及each loop

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

如何在页面加载时立即运行jQuery？

2 个答案: