jqueryのショーの非表示使用して、同じクラス

Question

https://jsfiddle.net/ccfvkjyf/

私はintputボックスをクリックして、しかし、別のintputボックスは、同じクラスを使用して、再びテキストを、テキストを閉じて再度開く]をクリックしたときにテキストを表示したい

$(".date-picking").click(function(){ 
    $('.display').show(); 
}); 

。

あなたがロジックの下に試すことができます任意のアイデアに

Answer 1

を教えてください：変数に集中入力を保存し、次のフォーカスイベントでそれを確認したフォーカスイベントに 。同じ入力が再び焦点を当てた場合、それ

$(document).ready(function(){ 
var focusedInput; 
$(".date-picking").on('focus',function(){ 
    if(focusedInput!=$(this)){ 
     focusedInput=$(this); 
    $('.display').hide(1000); 
    $('.display').show(1000); 
    } 
}); 
}); 

JSFIddle

Answer 2

あなた blur inputフィールド

はあなたがhideにtextをしようとしている場合がございますので、あなたはfocus() and blur()メソッドを使用していることを行うことができトグルそうでない場合はトグルしません。 、以下のように

を入力してください。

$(document).ready(function(){ 
 
$(".date-picking").on("focus",function(){ 
 
\t $('.display').show(); 
 
}); 
 
$(".date-picking").on("blur",function(){ 
 
\t $('.display').hide(); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="date-picking " name="arrival" type="text" placeholder="sometext" value=""/> 
 

 
<input class="date-picking " name="departure" type="text" placeholder="sometext" value=""/> 
 

 
<div class="display" style="display:none">Loading text</div>

Answer 3

チェックこの作業スニペットを

 

 
$(document).ready(function() { 
 

 
     function handler1() { 
 
     $('.display').show(); 
 
     $(this).one("click", handler2); 
 
    } 
 

 
    function handler2() { 
 
     $('.display').hide(); 
 
     $(this).one("click", handler1); 
 
    } 
 
    $(".date-picking").one("click", handler1); 
 

 

 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input class="date-picking " name="arrival" type="text" placeholder="sometext" value=""/> 
 

 
<input class="date-picking " name="departure" type="text" placeholder="sometext" value=""/> 
 

 
<div class="display" style="display:none">Loading text</div>