Question

让我们想象一下我有三个输入：

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

和一个div表，在将一些数据写入input "a"或input "b"时应该删除。我想要采取的逻辑是：{ 如果你点击并添加一些数据到input a显示该表到我 - ＆gt;表出现 - ＆gt;如果我点击input b不要隐藏div，但是如果我点击其他地方例如在input c中，隐藏表格。已经是第3天我不能这样做了。附：我的老板告诉我不要使用$ timeout。它应该用模糊和焦点来完成

Answer 1

只需将输入a和b包装在同一个类中，然后在该类上使用blur和focus。

＆＃13;

$(document).ready(function(){
$('#showab').hide();
$("input.change").focus(function(){
    $('#showab').show();
}); 
$("input.change").blur(function(){
    $('#showab').hide();
});
});

＆＃13;

input{
display:block;
}

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

您希望在隐藏或显示包含该表的div时使用类。

另请注意Jquery focus（点击进入）和blur（点击进入）类

＆＃13;

$(".show").focus(function()
{
   $('#showTable').show();
});
  
$(".show").blur(function()
{
  $('#showTable').hide();
});

＆＃13;

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

＆＃13;

焦点改变时不隐藏下拉列表

3 个答案: