使用onclick或類似功能隱藏和顯示輸入字段

-1

我有多個輸入字段。我只想要一次展示。當用戶輸入信息並點擊下一個按鈕時，它將隱藏第一個輸入並顯示第二個輸入。當他們再次擊中時，它將隱藏第二個輸入並顯示第三個輸入等等。我試圖直接用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

看起來你忘了包含你嘗試的JavaScript使用。請更新您的問題以包含此內容，否則應該關閉[off-topic（＃1）]（/ help/on-topic） – 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中的第一個孩子。一旦你有了這個，你的按鈕點擊處理程序可以像這樣簡單：獲取當前可見的輸入格，隱藏它，然後顯示下一個

$(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或類似功能隱藏和顯示輸入字段

回答

相關問題