javascript - 隐藏所有元素 onblur jquery 但在焦点上不隐藏它

Question

我有多个输入具有相同的类“z”

<input type=text class=z>
<input type=text class=z>
<input type=text class=z>
<input type=text class=z>

我的jQuery是

$(document).ready(function(){
    $('.z').blur(function(){
        $('.z').hide();
    });
});

如果我失去对所有这些元素的关注，我想隐藏所有这些元素。但我不想在专注于这些元素中的每一个时隐藏它们。问题是，在第一个元素上键入后，当我转到下一个元素时，它会自动隐藏。我应该怎么办？

Answer 1

用于$(this).show();使当前元素可见并隐藏其余元素。

$(document).ready(function(){
    $('.z').blur(function(){
        $('.z').hide();
        $(this).show();
    });
});

您可以从选择器中排除当前元素以使用.notlike 隐藏元素$('.z').not(this).hide();

$(document).ready(function(){
      $('.z').blur(function(){
            $('.z').not(this).hide();       
      });
});

根据 OP 的变化进行编辑

如果元素失去焦点，您可以添加属性来存储并使用它来确定所有元素是否都失去焦点。

现场演示

$(document).ready(function(){
    $('.z').blur(function(){
        $(this).attr('lostFocus', 'true');
        if($('.z').length == $('.z[lostFocus="true"]').length)
             $('.z').hide();
    });
});

请注意为您的 html 元素的属性添加引号，如下所示。

<input type="text" class="z">
<input type="text" class="z">
<input type="text" class="z">
<input type="text" class="z">