jquery show hide mit gleicher Klasse

Question

https://jsfiddle.net/ccfvkjyf/

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

Ich mag den Text anzuzeigen, wenn das intput Feld klicken, aber klicken Sie ein anderes intput Feld, um den Text zu schließen und den Text noch einmal wieder öffnen, indem gleiche Klasse.

Bitte geben eine Ahnung

Answer 1

Sie können unter Logik versuchen: auf Fokus-Ereignis des fokussierten Eingangs in Variablen speichern und überprüfen Sie es auf der nächsten Fokus Ereignis. wenn gleiche fokussiert Eingang wieder dann wechseln nicht anders Toggle es

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

JSFIddle

Answer 2

könnten Sie die text wenn Sie blurinput Feld hide versuchen werden, so dass Sie, dass die Verwendung focus() and blur() Methode tun könnte , wie unten,

Klicken Sie auf eine beliebige Stelle außerhalb der Eingabe versteckt Text.

$(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

prüfen diese Schnipsel Arbeits

 

 
$(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>