简短回答

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

使用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

Answer 2

简短回答

为您的“添加更多图片”按钮添加一个名为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添加到页面中。您可能应该将它放在一个单独的文件中，但是您可以在 jQuery之后将<script>标记中的以下内容放入其中：

$(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(); }); });

如何在HTML中隐藏和显示表单的输入元素

2 个答案:

简短回答

长答案