如何隱藏和顯示錶單的輸入元素在HTML

Question

假設我有有一些文件中的字段的一種形式：

 <form action="" method="post" enctype="multipart/form-data" id="form"> 
     <h3>Ask </h3> 
     <p></p> 
      <div> 
      <p><label for="id_title">Topic</label>:<p> 
      <p><input id="id_title" type="text" name="title" maxlength="300" /><p> 
      </div> 
      <div> 
      <p><label for="id_pic">Picture</label>:<p> 
      <p><input type="file" name="pic" id="id_pic" /><p> 
      <p><button type="button">Add more pictures</button></p> 
      </div> 
      <div> 
      <p><label for="id_pic_1">Picture 1</label>:<p> 
      <p><input type="file" name="pic_1" id="id_pic_1" /><p> 
      </div> 
      <div> 
      <p><label for="id_pic_2">Picture 2</label>:<p> 
      <p><input type="file" name="pic_2" id="id_pic_2" /><p> 
      </div> 
      <div> 
      <p><label for="id_pic_3">Picture 3</label>:<p> 
      <p><input type="file" name="pic_3" id="id_pic_3" /><p> 
      </div> 
      <div> 
      <p><label for="id_pic_4">Picture 4</label>:<p> 
      <p><input type="file" name="pic_4" id="id_pic_4" /><p> 
      </div> 
      <div> 
      <p><label for="id_description">Details</label>:<p> 
      <p><textarea id="id_description" rows="10" cols="40" name="description"></textarea><p> 
      </div> 
      <button type="submit">Submit</button> 
     </form> 

最初，我想隱藏PIC_1，PIC_2，pic_3和pic_4直到用戶點擊圖片下方的按鈕。我認爲JavaScript可以做到這一點，但我是新來的JavaScript。

任何人都可以給我一些方向嗎？

謝謝。

Answer 1

簡短的回答

給你 「添加更多圖片」 按鈕，一個ID叫add-more。然後，</body>前右將此代碼添加到您的網頁：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    // Hide the additional photo uploads 
    var $additionals = $("#id_pic_1, #id_pic_2, #id_pic_3, #id_pic_4"); 
    $additionals.hide(); 
    // Show more photo uploaders when we click 
    $("#add-more").on("click", function() { 
     $additionals.show(); 
    }); 
}); 
</script> 

龍答案

jQuery是一個JavaScript庫，使得這些東西多容易對付。一些人（包括我自己在內，當我學習時）認爲jQuery 是 JavaScript是非常普遍和有用的。

包括你的頁面上的鏈接，它得到的jQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

之前，我們做任何事情，讓我們給該按鈕的ID，這樣我們可以在以後引用它。讓我們打電話給我們的按鈕add-more。

<button type="button" id="add-more">Add more pictures</button> 

現在，讓我們在頁面中添加一些自己的JavaScript。你或許應該把它放進一個單獨的文件，但你可以逃脫把下面的東西在<script>標籤 jQuery的東西后：

$(document).ready(function() { 

    // This code is inside of the "document ready" stuff because it 
    // will execute AFTER all of the HTML stuff has been loaded. 

    // First, let's find all of the additional things we want to hide 
    // initially. We COULD do this with CSS but then browsers without 
    // JavaScript couldn't upload more photos. 
    var $additionals = $("#id_pic_1, #id_pic_2, #id_pic_3, #id_pic_4"); 

    // Okay, so now we have all of those in a variable called $additionals. 
    // Variables don't have to start with a $, but because jQuery uses that, 
    // I like to prefix my jQuery-selected elements with a dollar sign. 
    // Let's hide them now! 
    $additionals.hide(); 

    // When we click the button with the ID "add-more", show the other stuff. 
    $("#add-more").on("click", function() { 
     $additionals.show(); 
    }); 

}); 

Answer 2

使用CSS來隱藏圖像

.hide-me { 
    display: none; 
} 

現在包括像這樣之間的jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

現在的腳本標記（最好是在你的頁面的底）：

<script> 
$(document).on('ready', function() { 

    $(.hide-me').show(); 

}); 
<script> 

這只是告訴jQuery，一旦加載頁面，你想顯示的類與圖像.hide-me