假设我有一个包含一些文件字段的表单:
<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,直到用户单击 pic 下的按钮。我认为 javascript 可以做到这一点,但我是 javascript 的新手。
谁能给我一些指导?
谢谢。
最佳答案
简答
为您的“添加更多图片”按钮提供一个名为 add-more
的 ID .然后,将此代码添加到您页面的 </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();
});
});
关于javascript - 如何在 HTML 中隐藏和显示表单的输入元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15193605/