久しぶりにエディタ開いたので、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が書けました。

いじょ

klog

jQueryの基礎② 〜append