すべての入力が記入されている場合にdivを表示

Question

すべての入力が満たされているかどうかを確認した後にdivを表示する方法を理解しようとしていますが、#intro-infoセクション内の入力をチェックしたいだけです。私は、すべての入力が記入されている場合は、ボタン#intro-buttonディスプレイを作るためにelse文で書くことが何かわからない。

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 { 
 
\t 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要素の可視性を設定します。またnextボタンのその選択に注意してください代わりkeypress

の

Answer 2

• 使用inputイベント使用jQuery.filterとbutton

以外formのすべての値をテストするには、.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

• あなたkeypressinputに変更

  。

• CSS IDセレクタ先立っクラスセレクタに、#intro-button{ display:none}は.block{display:block}の前です。したがって、クラスblockが追加されても、表示はまだありません。

  最も簡単な解決策はdisplay .blockプロパティに!importantを追加です：

  .block { 
      display: block !important; 
  } 
  

• JSの一部：すべてinputed時にクラスを追加します。あなたのコードから

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