1

いくつかのファイル フィールドを持つフォームがあるとします。

        <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 の下のボタンをクリックするまで、pic_1、pic_2、pic_3、pic_4 を非表示にしたいと思います。私はjavascriptがそれを行うことができると思いますが、私はjavascriptが初めてです。

誰かが私に指示を与えることができますか？

ありがとう。

4

2 に答える 2

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>

これは、ページがロードされたら、クラス.hide-meで画像を表示するようにjQueryに指示するだけです。

于 2013-03-04T02:39:27.923 に答える
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 はどこにでもあり便利なので、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();
    });

});
于 2013-03-04T02:45:17.950 に答える