javascript - 当用户结束输入“输入”并转到下一个 div 时，如何隐藏 div

Question

这是我的 HTML：

<div id="word1"><input type="text" class="Q"></input><input type="text" class="A"></input></div><br>
<div id="word2"><input type="text" class="Q"></input><input type="text" class="A"></input></div><br>

我想做的是，如果用户最终在 Q 输入上键入内容并在 A 输入上执行相同操作，则最近使用的 div，fadeOut ;)

我的JavaScript：

var nowWord = 1;
var focusOuts = 0;
$(document).ready(function() {
   $("#word" + nowWord + " > .Q").focusout(divFocusOut());
   $("#word" + nowWord + " > .A").focusout(divFocusOut());

   function divFocusOut(){
       focusOuts++;
       if(focusOuts == 2){
          $("#word" + nowWord).fadeOut(1000);
          focusOuts = 0;
       }
    }
});

问题是： div fadeOut 本身没有任何用户的操作，就在站点加载之后。怎么了？

Answer 1

在这里演示

$(document).ready(function(){
    $(".Q,.A").blur(function(e){
        if($(this).val().length>0 && $(this).siblings("input").val().length>0){
            $(this).parent().fadeOut(1000);
        }
    });
});

Answer 2

$("#word" + nowWord + " > .Q").focusout(divFocusOut());
$("#word" + nowWord + " > .A").focusout(divFocusOut());

无需用户操作即可做到这一点。如果您在此处设置 css 而没有淡入淡出，问题就消失了。或者只是在没有javascript的情况下一开始就设置CSS。

或者，如果您希望它发生，但不要在页面加载时将其放入函数中。