Question

我在查看是否已填写所有输入后，试图弄清楚如何显示div。我只想检查#intro-info部分中的输入。如果填写了所有输入，我不知道在else语句中写什么来显示按钮#intro-button。

＆＃13;

$(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;
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

例如：

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

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

Answer 2

使用input事件代替keypress
使用jQuery.filter并测试form除button以外的所有值

另请注意，next按钮的选择器必须为.next，而非#next

$(function() {
  var intro = $('.intro');
  var testFunction = function() {
    return $('#intro-info :input:not(button)').filter(function() {
      return this.value == '';
    })
  };
  intro.on('input', function() {
    $('.next').toggle(!testFunction().length);
  });
});

.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 3

将您的keypress更改为input。
CSS ID选择器优先于类选择器，#intro-button{ display:none}优先于.block{display:block}。即使添加了类block，但显示仍然没有。

最简单的解决方案是在.block属性!important中添加display：
```
.block {
  display: block !important;
}
```

JS部分：全部输入后添加课程。

if (intro.filter(function(){
  return $(this).val().length > 1
}).length === intro.length){
  $("#intro-button").addClass('block');
}else {
  $("#intro-button").removeClass('block');
}

如果填写了所有输入，则显示div

3 个答案: