Question

我的表单上有2个输入，我想在输入处于焦点时显示其各自的面板。

我正在使用Bootstrap，因此我的表单分为2列：左列是输入，右列是输入焦点时需要显示的面板。

以前，当选择一个输入时，它会触发页面上的所有面板，所以我尝试使用$(this).parent().next().('.js-panel-tip').show();，但它不起作用。

如何定位所选输入的相应面板？

JS：

$('.js-show-panel-tip').focus(function() {
    $(this).parent().next().('.js-panel-tip').show();

    $(document).bind('focusin.js-panel-tip click.js-panel-tip',function(e) {
        if ($(e.target).closest('.js-panel-tip, .js-show-panel-tip').length) return;
        $(document).unbind('.js-panel-tip');
        $('.js-panel-tip').fadeOut('medium');
    });
});
$('.js-panel-tip').hide();

HTML：

<div class="container">

  <form>

 <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control js-show-panel-tip" placeholder="Email">
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default bg-gray js-panel-tip">
        <div class="panel-body">
          <u>Email address</u>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint inventore accusamus quia voluptates quasi ipsam repellat corrupti iure, dicta earum eligendi! Eligendi dolorum neque fuga non eaque reiciendis facere praesentium.
        </div>
      </div>
    </div>
  </div><!-- row -->

   <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default bg-gray js-panel-tip">
        <div class="panel-body">
          <u>Password</u>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint inventore accusamus quia voluptates quasi ipsam repellat corrupti iure, dicta earum eligendi! Eligendi dolorum neque fuga non eaque reiciendis facere praesentium.
        </div>
      </div>
    </div>
  </div><!-- row -->
  </form>
</div>

Answer 1

尝试$(this).parent().parent().next().find('.js-panel-tip').show();

JSfiddle

Answer 2

你应该上升2次，然后使用find（）方法

$(this).parent().parent().next().find('.js-panel-tip').show();

Answer 3

我可以建议另一种方法吗？使用数据属性：

<input type="text" data-show-focus=".email-info">
<input type="text" data-show-focus=".password-info">
<div class="email-info hide">Some email info here</div>
<div class="password-info hide">Password info</div>

使用这个简单易用的jQuery：

$('[data-show-focus]').on('focus', function(){
  var tgt = $(this).data('show-focus');
  $('.show-focus').addClass('hide');
  $(tgt).removeClass('hide');
});
$('[data-show-focus]').on('blur', function(){
  $('.show-focus').addClass('hide');
});

如果您还没有，请创建一个.hide课程：

.hide{
  display:none;
}

您可以在此处看到它：https://jsfiddle.net/m1dx1yn9/1/

Answer 4

试试这个

  $(this).parents(':eq(1)').next().find('.js-panel-tip').show();

希望这会对你有所帮助。

jQuery在输入焦点上显示当前div

4 个答案: