如何隐藏和显示表单的输入元素在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