jquery - jQuery一个元素事件影响另一个

Question

如果某处的输入字段被聚焦，我试图实现的是显示/隐藏一个 div。显示有效，但不会隐藏它。我是 jQuery 新手

我无法弄清楚我的代码有什么问题。

$(document).ready(function(){

if ($("#a").has(":focus")){
        $("#b").css("visibility","visible");}
    else {
        $("#b").css("visibility","hidden");}
});

html:

   <ul>
<li id="a" >
    <div class="label">
        <label id="company" class="description" for="company">Company</label>
    </div>
    <div class="input">
        <input id="inputcompany" name="company" class="element text medium" type="text" maxlength="255" value=""/> 
    </div> 
</li>
<li id="b" style="visibility: hidden;">
    <div class="label">
        <label class="description" for="company">Name </label>
    </div>
    <div class="input">
        <input id="company" name="company" class="element text medium" type="text" maxlength="255" value=""/> 
    </div> 
</li>

对不起，伙计们，secon li 应该是 id "b"。

Answer 1

javascript 代码只会执行一次。似乎您想要一个事件处理程序 - 每当#a失去/获得焦点时都会执行的代码。

$('#a').focus(function() {
  $("#b").css("visibility","visible");
}).blur(function() {
   $("#b").css("visibility","hidden");
});

Answer 2

如果您想在第一个 li 时显示下一个 li，我认为您的做法是错误hovering的，我会这样做：

//For example on mouseover the #a
$('#a').on({
    mouseover:function() {
        $('#b').css("visibility","visible"); //we show the #b
    },
    //on mouseleave
    mouseleave: function() {
        if($('#a').find('input').val().length == 0) { //if nothing was entered in the first input
            $('#b').css("visibility","hidden"); //hide the #b
        }
    }
});

在这里查看一个活生生的例子。

希望这会有所帮助。

Answer 3

试试这个，

$('#a input').focus(function() {
  $("#b").css("visibility","visible");
}).blur(function() {
   $("#b").css("visibility","hidden");
});