imgタグのsrcを取得し、別のimgタグのsrcをそれに書き換えるjs

どうも、レーウィンです。
書くことないなあって思ってたら１ヶ月経過してました。月日の流れが早い。
今回も簡単なことになるけど、jsの話。

ECサイトとかにある、小さい画像をクリックすると大きい画像がそれになるみたいなやつをjQueryで作ってみる。

まず、HTML

	<p class="large_img"><img src="img_a.jpg" alt=""></p>
	<ul class="small_img_list">
		<li class="active"><img src="img_a.jpg" alt=""></li>
		<li><img src="img_b.jpg" alt=""></li>
		<li><img src="img_c.jpg" alt=""></li>
	</ul>

.small_img_listの中でli.activeの中にあるimgが今.large_imgの中にあるimg。
これを、img_b.jpgが中に入ったliタグをクリックした時に・・・

	<p class="large_img"><img src="img_b.jpg" alt=""></p>
	<ul class="small_img_list">
		<li><img src="img_a.jpg" alt=""></li>
		<li class="active"><img src="img_b.jpg" alt=""></li>
		<li><img src="img_c.jpg" alt=""></li>
	</ul>

こうしたい。
というわけでjs

$(function() {
	$(".small_img_list li").on("click", function() {
		if(!($(this).hasClass("active"))) {
			var select_img = $(this).find("img").attr("src");
			$(".large_img img").attr("src", select_img);
			$(".small_img_list li.active").removeClass("active");
			$(this).removeClass("active");
		}
	});
});

タイミングは.small_img_list liをクリックした時なので.on(“click”,function() {…});。
まず、クリックしたliタグが既にactiveだったら意味がないのであらかじめif文ではじいちゃいましょう。
if(!($(this).hasClass(“active”))) {…}
で、「クリックした要素が.activeを持っていない時」で分岐してくれるようになる。
findは子要素を取得してくれる。$(this).find(“img”)で、クリックした要素の中にあるimgタグとなる。
attrは属性を取得したり変更したりできる。初めはsrc属性の中に書いてある文字を取得したいので、.attr(“src”)
で、次は.large_img imgのsrc属性の中に書いてある文字を変更したいので.attr(“src”, …)
最後にremoveClassとaddClass使ってクラスを削除・追加すれば完了。

デモ？そんなものはないでーす！では！