ホバーしたら隣接した要素内のimgのsrcを書き換える。

ども、レーウィンです。
また簡単なjsをアップ。自分のコピペ用記事。

まずHTMLがこんなん。

<p><img src="/img/hover_img_off.png" alt=""></p>
<p class="hov_txt">ここにホバーしたらimgタグのsrcを変えたい</p>

pタグが２つ並んでいて、下のpタグにホバーすると

<p><img src="/img/hover_img_on.png" alt=""></p>
<p class="hov_txt">ここにホバーしたらimgタグのsrcを変えたい</p> //ホバー中

こうしたい。

つまり、.hov_txtにホバーした時、１つ前の要素の中にあるimgのsrc属性を書き換えればいい。
というわけでできたものがこちらになります。

$(function() {
	$(".hov_txt").hover(function() {
		$(this).prev().find("img").attr("src", $(this).prev().find("img").attr("src").replace("_off", "_on"));
	}, function() {
		$(this).prev().find("img").attr("src", $(this).prev().find("img").attr("src").replace("_on", "_off"));
	});
});

ちょっとした解説

jQueryのhoverはこの構文。

$(".hov_txt").hover(function() {
	//ホバー時
}, function() {
	//外れた時
});

先にマウスが乗った時のプログラムを書いて、後にはマウスが外れた時のプログラムを書く。
で、hover内では$(this)はホバーしている要素、今回でいうとクラス名hov_txtを持った要素の中でも今マウスが乗っているやつだけを指す。
prev()は１つ前の要素を指定できる。なので、今回だと$(this).prev()で「p.hov_txtの１つ前」だから、imgタグを囲んでるpタグを指してくれる。
find()は、子要素の中で()内に一致した要素を取得できる。find(“img”)なので、pタグの中のimgを取得。
あとはattrでsrc属性の中を取得し、その中の文字列を差し替える。
外れた時の内容は逆のことをすればいいから、差し替えるテキストを逆にするだけでおｋ。

ではでは～。