jQuery在輸入焦點上顯示當前div

我在窗體上有2個輸入，我想在輸入焦點時顯示其各自面板。jQuery在輸入焦點上顯示當前div

我使用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>

來源

2016-01-27 brunodd

快速小提琴：https：//jsfiddle.net/m1dx1yn9/ – rybo111

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

JSfiddle

來源

2016-01-27 10:30:32

謝謝。差不多了。當您移至下一個輸入時，當前面板應淡出：https://jsfiddle.net/brunodd/2pr3xtxf/3/ – brunodd

@brunodd結帳https://jsfiddle.net/2pr3xtxf/4/ –

謝謝！這只是添加$（'。js-panel-tip'）。hide（）; – brunodd

你應該去了2次，然後使用find（）方法

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

來源

2016-01-27 10:32:34

我建議另一種方法？使用數據屬性：

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

來源

2016-01-27 10:37:56 rybo111

試試這個

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

希望這會對你有所幫助。

來源

2016-01-27 10:39:48 Amol

jQuery在輸入焦點上顯示當前div

回答

相關問題