スタートページJavascriptjQueryの基礎

jQueryによる表示・非表示

HTMLのある部分を表示・非表示反転をさせたいことがよくあります。
Javascriptだけでも可能ですが、jQueryの toggle メソッドを用いると、簡潔な記述ができますし、多様な機能が使えます。


インライン個所の表示・非表示

この例は、通常のJavascriptで作成した「表示・非表示」と同じ機能です。

次の[解答表示]の部分をクリックしてください。解答が表示されます。クリックを繰り返すと表示・非表示が反転します。


次の計算で正しいものはどれか。
  ア 1+1=2
  イ 1+1=3
[解答表示]


<script type="text/javascript">
    function 表示反転(対象ID) {                                         // A
        var セレクタ = "#" + 対象ID;                                    // B
        $(セレクタ).toggle();                                             // C
    }
</script>

~<a href="Javascript:表示反転('解答');">[解答表示]</a>~         <!-- D --> 
<div id="解答" style="display:none">                                <!-- E -->
<p>正解は[ア]です。</p>
</div>

画像の表示・非表示

ボタンをクリックすると、画像がゆっくりと表示/非表示されます。

<script>
    $(function(){                               // F
        $("#表示ボタン").click(function () {    // G
            $("#画像").toggle(5000);            // H
        });
    })
</script>

<p>~<button id="表示ボタン">画像表示</button><br>  <!-- I -->
<img id="画像" src="called/image1.jpeg" alt=""></p>        <!-- J -->