表单焦点 jQuery 缩短代码

Question

我对 JS 和 jQuery 的了解有限，我不知道如何更改此代码。

$('.form input').on('focus', function() {
  $(this).parent().addClass('active');
});
$('.form input').on('focusout', function() {
  $(this).parent().removeClass('active');
});

是否可以缩短此代码？如是。怎么样？

Answer 1

大部分情况下都很好。不过，您可以链接 on 调用：

$('.form input')
  .on('focus', function() {
    $(this).parent().addClass('active');
  })
  .on('focusout', function() {
    $(this).parent().removeClass('active');
  });

旁注：通常您会使用 focusin/focusout 或 focus/blur 而不是混合搭配。

Answer 2

使用 focus 和 blur .

$("#txtTest").focus(function() {
  $(this).parent().addClass("active");
}).blur(function() {
  $(this).parent().removeClass("active");
});

.active {
  background-color: #623886;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id='txtTest' />

</div>

表单焦点 jQuery 缩短代码

Form focus jQuery shorten code

forms

jquery

focus