Jquery在输入后隐藏元素答案

【问题标题】：Jquery Hide the element after inputJquery在输入后隐藏元素
【发布时间】：2015-02-06 00:21:18
【问题描述】：

JS/Jquery 在焦点下一个元素上消失/jquery 在焦点上的元素上隐藏前一个元素在有输入后

我有代码：

<script>
$(document).ready(function(){
$("div").click(function(){
$("#hide").hide();
});
);
</script>

上面隐藏了元素'div' onclick。我真正要找的是当我填写了第一个字段，然后单击第二个，然后它应该隐藏第一个。 div 应该滑出。例如，我有 5 个字段，分别是姓名、电子邮件、出生日期、地址、邮政编码。因此，当我输入我的姓名并单击电子邮件时，姓名 DIV 应该会通过滑出而消失。我是 JQuery 新手。

我该怎么做？

谢谢

【问题讨论】：

您可以在模糊中隐藏您的字段，但从用户体验的角度来看，这是非常糟糕的。如果您犯了错误，如何回到您刚刚填写的字段进行更改？

标签： jquery

【解决方案1】：

这是一个非常简单的答案，您可以轻松扩展：

$('input#email').click(function(){
    if ($('input#name').val().length > 0 ){
        $('input#name').hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='name' placeholder="name"></input><br>
<input id='email' placeholder="email"></input><br>

【讨论】：

【解决方案2】：

虽然对用户隐藏字段不是一个好主意，但当 focus 设置在另一个字段上时，您可以 fadeOut 每个非空字段。这样，当您在表单外部单击时，您至少有可能返回到字段（在未单击任何其他字段之前，它将可见）。

$(".txt").focus(function(){
  var inputs = $(".txt").not($(this)).not(".txt:hidden");
  if($(".txt").not(".txt:hidden").length == 2){
    $(".txt").focusout(function(){
      if($(this).val()){
        $(this).fadeOut();     
      }
    });
  }
  inputs.each(function(){
    if($(this).val()){
      $(this).fadeOut();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div><input type="text" class="txt" placeholder="Name"/></div>
<div><input type="text" class="txt" placeholder="Email"/></div>
<div><input type="text" class="txt" placeholder="DOB"/></div>
<div><input type="text" class="txt" placeholder="Address"/></div>
<div><input type="text" class="txt" placeholder="Post Code"/></div>

JSFiddle

【讨论】：

【解决方案3】：

您可以使用 jQuery 的 on() 或 bind() 方法绑定事件。你关心的事件是blur，当元素失去焦点时触发。

类似：

$('#name').on('blur', function() {
    $(this).hide();
});

【讨论】：