久しぶりにエディタ開いたので、jQueryのappendの使い方を復習した。
やりたい内容
buttonをクリックしたら画像を追加(append)して5回押すたびに画像を切り替える。
作ったデモサイト
こんな感じです。
書いたコード
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript"> var count = 0; var file = "cambodia01.jpg"; $(function(){ $("#btn").click(function(){ count++; $("#main").append("<img src='images/"+file+"' width='150' height='150'>"); if (count == 5){ count = 0; $("#main").append("<br>"); if (file == "cambodia01.jpg") { file = "cambodia02.jpg"; } else { file = "cambodia01.jpg"; } } }); $("#removeBtn").click(function(){ $("#main").empty(); }); }); </script> </head> <body> <input type="button" value="button" id="btn"> <input type="button" value="remove" id="removeBtn"> <div id="main"></div> </body> </html>
htmlのひな形とボタンを用意する。
<body> <input type="button" value="button" id="btn"> <input type="button" value="remove" id="removeBtn"> <div id="main"></div> </body>
画像追加用のボタンにid=”btn”を設定し、画像削除用のボタンにid=”removeBtn”を設定します。
divタグ内にid=”main”を記載します。このdivタグ内に画像をappendしていきます。
ボタンがクリックされたら画像を追加する。
$("#btn").click(function(){ count++; $("#main").append("<img src='images/"+file+"' width='150' height='150'>");
id=”btn”のボタンがクリックされたら、id=”main”のdivタグ内にappendして画像をappendします。
事前に画像ファイル名の変数”file”と、クリック回数を計測する変数”count”を宣言しておきインクリメントします。
5回クリックされたらappendする画像を変更する。
if (count == 5){ count = 0; $("#main").append("<br>"); if (file == "cambodia01.jpg") { file = "cambodia02.jpg"; } else { file = "cambodia01.jpg"; } }
countが5回に達したらcountをリセットして、fileの内容を別の画像に置き換えます。
removeボタンを押すと画像を消す。
$("#removeBtn").click(function(){ $("#main").empty(); });
removeボタンを押したらdivの中身を空(empty)にします。
こういう感じでscriptが書けました。
いじょ