2017-09-13 56 views
0

讓我們想象一下,我有三個輸入不隱藏下拉:當焦點改變

<input type="text" id="a"> 
<input type="text" id="b"> 
<input type="text" id="c"> 

和一個div表寫一些數據input "a"input "b"時應該降下來了。 那麼我想採取的邏輯是:{ 如果你點擊並添加一些數據到input a顯示我的表 - >表出現 - >如果我點擊input b不要隱藏那div,但是如果我點擊其他地方例如input c,隱藏表格。 已經是第三天,我不能這樣做。 P.S.我的老闆告訴不要使用$超時。應該使用模糊和焦點

+1

請提供完整的代碼 –

+0

代碼是可以理解的只有我,我只是想知道如何執行此操作。 –

+0

先自己試試 – SilverSurfer

回答

1

只需在同一類中包裝輸入ab,然後在該類上使用blurfocus

$(document).ready(function(){ 
 
$('#showab').hide(); 
 
$("input.change").focus(function(){ 
 
    $('#showab').show(); 
 
}); 
 
$("input.change").blur(function(){ 
 
    $('#showab').hide(); 
 
}); 
 
});
input{ 
 
display:block; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input class="change" type="text" id="a"> 
 
<input class="change" type="text" id="b"> 
 
<input type="text" id="c"> 
 
<div id="showab">table here</div>

+0

謝謝@ ab29007我會嘗試在我的代碼中實現邏輯,並在幾分鐘內分享答案 –

0

$("#showData").hide(); 
 

 
function lookup(arg) { 
 
    var id = arg.getAttribute('id'); 
 
    var value = this.value; 
 
    console.log(id); 
 
    if (id === "a" || id === "b") { 
 
     $("#showData").show(); 
 

 
    } else { 
 
     $("#showData").hide(); 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="a" onkeyup="lookup(this);" onClick="lookup(this);"> 
 
<input type="text" id="b" onkeyup="lookup(this);" onClick="lookup(this);"> 
 
<input type="text" id="c" onkeyup="lookup(this);" onClick="lookup(this);"> 
 
<div id="showData">A Or B is Clicked here</div>

0

你要隱藏或顯示包含表的DIV時利用的類。

還注意到Jquery的focus的(點擊進入),並blur(點擊出)班

$(".show").focus(function() 
 
{ 
 
    $('#showTable').show(); 
 
}); 
 
    
 
$(".show").blur(function() 
 
{ 
 
    $('#showTable').hide(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input class="show" type="text" id="a"> 
 
<input class="show" type="text" id="b"> 
 
<input class="dontShow" type="text" id="c"> 
 
<div id="showTable" hidden="hidden"> 
 
    <table> 
 
    <thead> 
 
     <tr><th>test 1</th><th>test 2</th></tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr><td>1</td><td>2</td></tr> 
 
     <tr><td>3</td><td>4</td></tr> 
 
    </tbody> 
 
    </table> 
 
</div>