Question

我正在尝试将一个类添加到焦点在输入字段上的元素的父级。有一个关注输入字段，但由于有一个字段添加，我希望焦点是整个事物，因此使用.parent（）。我已经尝试了以下和其他一些东西，但无法让它工作。

这是HTML：

    <div class="input-group">
         <span class="input-group-addon">£</span>
         <input type="text" class="form-control mort-calc-field comma" id="pp">
    </div>

这是jQuery：

   $(document).ready(function(){
     $('.mort-calc-field').onfocus(function(){
     $(this).parent().addClass('calc-box-shadow');
     });
     $('.mort-calc-field').focusout(function(){
     $(this).parent().removeClass('calc-box-shadow');
     });
   });

Answer 1

而不是onfocus您需要使用focusin：

＆＃13;

$(document).ready(function() {
  $('.mort-calc-field').focusin(function() {
    $(this).parent().addClass('calc-box-shadow');
  });
  $('.mort-calc-field').focusout(function() {
    $(this).parent().removeClass('calc-box-shadow');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
  <span class="input-group-addon">£</span>
  <input type="text" class="form-control mort-calc-field comma" id="pp">
</div>

＆＃13;

Answer 2

试试这个：

   $(document).ready(function(){
     $('.mort-calc-field').focus(function(){
     $(this).parent().addClass('calc-box-shadow');
     });
     $('.mort-calc-field').blur(function(){
     $(this).parent().removeClass('calc-box-shadow');
     });
   });

尝试将类应用于父级

2 个答案: