jQueryの - 子供は入力

Question

を持っている場合は、私のhtmlコードは、私が達成したい何この

<div class="wrap"> 
    <div class="inputs"> 
     <input type="text"> 
     <p>X</p> 
    </div> 
    <div class="inputs"> 
     <input type="text"> 
     <input type="text"> 
     <p>x</p> 
    </div> 
</div> 

のように見える検出は次のとおりです。

1. 入力にフォーカスがある場合は、次の段落を示しました。
2. 入力がフォーカスを失った場合は、次のparagprahを非表示にします。
3. div.inputsに複数の入力がある場合は、そのうちの1つがフォーカスを失うまで段落を非表示にしないでください。

私はそれ

$(".inputs p").hide(); 

$(".inputs").focusin(function() { 
    $(this).find("p").slideDown(); 
}); 

$(".inputs").focusout(function() { 
    $(this).find("p").slideUp(); 
}); 

ため、このjQueryのコードを作成しそれは動作しますが、複数の入力とdiv.inputsのためには、隠し段落を開始し、それが再度表示開始。

私のコードで何が間違っていますか？

Answer 1

Niet the Dark Absolのように、可能な限りCSSを使用することを推奨します（アニメーションも可能です）。しかし、実際にjQueryでこれを処理する必要がある場合は、同じ入力グループ内の入力間でフォーカスを変更するときに上下のアニメーションを防ぐために、単に.stop()を追加するだけです。

$(".inputs p").hide(); 
 

 
$(".inputs").focusin(function() { 
 
    $(this).find("p").stop().slideDown(); 
 
}); 
 

 
$(".inputs").focusout(function() { 
 
    $(this).find("p").stop().slideUp(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="inputs"> 
 
     <input type="text"> 
 
     <p>X</p> 
 
    </div> 
 
    <div class="inputs"> 
 
     <input type="text"> 
 
     <input type="text"> 
 
     <p>x</p> 
 
    </div> 
 
</div>

Answer 2

CSSの仕事にJavaScriptを使用しないでください。

.inputs>p { 
    display: none; 
} 
.inputs>input:focus~p { 
    display: block; 
} 

Answer 3

$(function(){ 
$('p').hide(); 
$("input[type=text]").focusin(function() { 
    $(this).parents("div.inputs").find('p').show(); 
}); 
$("input[type=text]").focusout(function() { 
    $(this).parents("div.inputs").find('p').hide(); 
}); 
})