jquery特定のテキストフィールドが入力されるまで特定のフォーム要素を非表示にしますか？

Question

長いサインアップフォームがあり、いくつかのフィールドを非表示にして、特定の入力フィールドにテキストが入力されたときにのみ表示します。

私は非表示と表示のdivを見てきましたが、いくつかのトラブルになっフォーム要素は、（テキストでフォームを埋める）非表示にし、特定のトリガーにそれらを表示している

誰でも実装する方法の正しい方向に私を指すことができますクエリのこのような機能は ですか？アドバンテンスのthx！

Answer 1

特定の問題の詳細が提供されていないため、問題を解決するための簡単な例をまとめました。

You can see the live demo here.

HTML

<div id="field1wrapper" style="visibility: hidden;"> 
    <label for="field1">Field 1:</label> 
    <input type="text" id="field1" /><span>&lt;-- write on me</span> 
</div> 
<div id="field2wrapper"> 
    <label for="field2">Field 2:</label> 
    <input type="text" id="field2" /> 
</div>​ 

はJavaScript

$("#field1").keyup(function() 
{ 
    if($("#field1").val() != "") 
    { 
     $("#field2wrapper").css("visibility", "visible"); 
    } 
    else 
    { 
     $("#field2wrapper").css("visibility", "hidden"); 
    } 
});​ 

Answer 2

JQueryのchange（）イベントハンドラを使用していますか？

http://api.jquery.com/change/

ページ上のイベントをトリガするためにそれを使用する方法の例があります。

Answer 3

You could do something like this:

HTML：

<label for="txt1">Field 1</label> 
<input type="text" id="txt1" /> 

<label class="secondary hidden" for="txt2">Field 2</label> 
<input class="secondary hidden" type="text" id="txt2" /> 

<label for="txt3">Field 3</label> 
<input type="text" id="txt3" /> 

<label class="secondary hidden" for="txt4">Field 4</label> 
<input class="secondary hidden" type="text" id="txt4" /> 

CSS：

input { display: block; margin-bottom: 10px; } 
.hidden { display: none; visibility: hidden; } 

のjQuery：

var $txt1 = $("#txt1"), 
    $secondary = $(".secondary"); 

$txt1.keyup(function() { 
    $secondary.toggleClass("hidden", $(this).val() == ""); 
});​ 

toggleClassを使用するには、あなたのトンができますoクラスを追加または削除するためのブール値を渡します。そしてkeyupに結合すると、すぐにあなたがchangeと同じようにonBlurイベントを待っている対フィールドの値に応じて表示または非表示することができます。