onclickなどの入力フィールドを非表示にする

-1

複数の入力フィールドがあります。私は一度に一つだけを見せたいだけです。ユーザーが情報の入力を完了し、次のボタンを押すと、最初の入力が非表示になり、2番目の入力が表示されます。彼らは再び次のヒット時に2番目の入力を非表示にし、3番目の入力を表示します。私はhide（）/ show（）JQuery関数で直接divと入力フィールドを隠そうとしましたが、動作させるように見えません。ここでは、私が使用している構造の基本的な例は、任意の入力が大歓迎です。onclickなどの入力フィールドを非表示にする

編集：JSBINとサンプルコードを、私が試した方法に更新しました。

JSBIN: http://jsbin.com/wixiyaraxi/edit?html,output 


    <!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
     <title>JS Bin</title> 
    </head> 
    <body> 

    <!-- // should be VISABLE at the start and be HIDDEN when Next button is clicked. --> 
    <div id="test1"> 
    <input type="text" id="test1" class="form-control" placeholder="Input 1:"> 
    </div> 

    <!-- // should be HIDDEN at the start and be VISABLE when Next button is clicked. --> 
    <!-- // when the Next button is clicked a second time should be HIDDEN.--> 
    <div id="test2"> 
    <input type="text" id="test2" class="form-control" placeholder="Input 2:"> 
    </div> 

    <!-- // should be hidden at the start and show when Next button is clicked a second time. --> 
    <div id="test3"> 
    <input type="text" id="test3" class="form-control" placeholder="Input 3:"> 
    </div> 


    <button type="button" class="btn btn-warning">Next</button> 
     </div> 

    </body> 
    </html> 

<script> 

$("#button").click(function(){ 
    $("#test1").hide(); 
    $("#test2").show(); 
}) 
</script>

出典

2016-08-22 Pyreal

を示し、それを隠して、現在の目に見える.input div要素を取得する：あなたは場所で、あなたのボタンのクリックハンドラは、のような単純なものができることをしたら使用する。これを含めるには質問を更新してください。そうでない場合は、[トピックオフ（＃1）]（トピック/ /ヘルプ/トピック）として閉じる必要があります – zzzzBov

あなたはこのように行うことができます。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 

<!-- // should be VISABLE at the start and be HIDDEN when Next button is clicked. --> 
<div class="test1"> 
    <input type="text" id="test1" class="form-control" placeholder="Input 1:"> 
</div> 

<!-- // should be HIDDEN at the start and be VISABLE when Next button is clicked. --> 
<!-- // when the Next button is clicked a second time should be HIDDEN.--> 
<div class="test2"> 
    <input type="text" id="test2" class="form-control" placeholder="Input 2:"> 
</div> 

<!-- // should be hidden at the start and show when Next button is clicked a second time. --> 
<div class="test3"> 
    <input type="text" id="test3" class="form-control" placeholder="Input 3:"> 
</div> 


<button type="button" class="btn btn-warning">Next</button> 
</div> 
    <script type="text/javascript"> 
    jQuery(document).ready(function($){ 
     var i = 1; 
     $(".form-control").each(function(){ 
      $(this).hide(); 
     }); 
     $("#test" + i).show(); 

     $(".btn").click(function(){ 
      if(i < 3){ 
       i++; 
      } 
      $(".form-control").hide(); 
      $("#test" + i).show(); 
     }); 
    }); 
    </script> 
</body> 
</html>

出典

2016-08-22 18:08:33 Sateesh

、あなたの<div>入力コンテナにクラス「入力」を与える、これを試してみてくださいCSSの最初の子以外のすべてを非表示にします。あなたが試みられJavaScriptを含めるのを忘れているように見えます、次のいずれか

$(function() { 
    $('button').on('click', function() { 
     var $cur = $('div.input:visible'); 
     $cur.hide(); 
     $cur.next().show(); 
    }); 
});

出典

2016-08-22 18:08:56

これは、表示されないものを表示しないのですか？（style = "display：none"） – Pyreal

onclickなどの入力フィールドを非表示にする

答えて

関連する問題