スタートページ> Javascript> 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 -->