javascript - 如果填写了所有输入，则显示一个 div

Question

在检查是否已填写所有输入后，我一直在尝试弄清楚如何显示 div。我只想检查 #intro-info 部分中的输入.如果所有输入都已填写，我不确定在 else 语句中写什么以使按钮 #intro-button 显示。

Here is a fiddle if it helps

$(function () {   
    var intro = $('.intro');

    intro.on('keypress', function() {
        if ($(this).val().length > 1) {
            $(this).next('.intro').addClass('block');
        }         
       /* else {
            $('.intro').hide();
        }*/
    });
    var allEmpty = true;

    $('#intro-info :input').each(function() {
        if ($(this).val() !== '') {
            allEmpty = false;
            return false; // we've found a non-empty one, so stop iterating
        } else
    });
     return allEmpty;
});

.intro {
  opacity: 0;
  padding: 10px 15px;
  margin: 20px auto;
}

.intro:first-child {
  display: block;
  opacity: 1;
}
.block {
  display: block;
  opacity: 1;
   -webkit-animation: fadein 1s ease-in;
   -moz-animation: fadein 1s ease-in;
    animation: fadein 1s ease-in;
}
.next {
  display: none;
}
#intro-button {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="intro-info">
  <input id="name" type="text" class="intro">
  <input id="email" type="email" class="intro">
  <input id="title" type="text" class="intro">
  <button id="intro-button">Proceed</button>
</div>



<a class="next">show div</a>

Answer 1

您可以使用 jQuery 的 toggle()方法来设置元素的可见性。因此，您可以从文本字段中获取输入，检查它们的长度，然后将结果传递给此函数。

例如:

$('.next').toggle($('#name').val().length > 0);

将根据是否在 name 字段中输入内容来设置 next div 的可见性。