jQueryの基礎② 〜appendその2

jQuery

 

やりたい内容

buttonをクリックしたら画像を追加(append)して偶数番目に赤い枠線をつける。

作ったデモサイト

こんな感じです。
 
 

書いたコード

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>append 2</title>
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">

	var count = 0;

	$(function(){
		$("#btn").click(function(){
			count++;

			$("#main").append("<img src='images/cambodia01.jpg' width='150' height='150'>");

			if (count == 2){
				count = 0;
				$("#main img:last-child").css("border", "5px solid red");
			}
		});
	});

	</script>
</head>
<body>
	<input type="button" value="button" id="btn">
	<div id="main"></div>
</body>
</html>

 

htmlのひな形とボタンを用意する。

<body>
	<input type="button" value="button" id="btn">
	<div id="main"></div>
</body>

 
画像追加用のボタンにid=”btn”を設定しdivタグ内にid=”main”を記載します。
このdivタグ内に画像をappendしていきます。
 

ボタンがクリックされたら画像を追加する。

		$("#btn").click(function(){
			count++;

			$("#main").append("<img src='images/cambodia01.jpg' width='150' height='150'>");

 
id=”btn”のボタンがクリックされたら、id=”main”のdivタグ内にappendして画像を追加します。
事前にクリック回数を計測する変数”count”を宣言しておきインクリメントします。
 

偶数回目の追加画像にborderをつける。

			if (count == 2){
				count = 0;
				$("#main img:last-child").css("border", "5px solid red");

 
countが2回に達したらcountをリセットして、imgの最後の要素にborderを設定します。
 

こういう感じでscriptが書けました。

 

Categorized: jQuery