表单焦点jQuery缩短代码

【问题标题】：Form focus jQuery shorten code表单焦点jQuery缩短代码
【发布时间】：2017-09-17 08:34:58
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery forms focus

【解决方案1】：

基本上没问题。不过，您可以链接 on 调用：

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

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

【讨论】：

谢谢注意，如果不知道这个）

【解决方案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>

【讨论】：