jQuery的顯示隱藏使用同一類

Question

https://jsfiddle.net/ccfvkjyf/

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

我想點擊intput框時，但點擊其他intput盒使用同一類再次關閉文本並重新打開文本顯示的文本。

請給任何想法

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

可能是你正在試圖hide的text當你blurinput領域，所以你可能用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>