ある条件の画像のみ表示を切り替える

質問

jqueryでメニューのように並んでる画像に対してクリックさせるとクリックしたものに対してclass属性にcurrentというものを入れるようにしています。

$("#localSide h2 img").click(function(){
if($(this).attr("class") != "current"){
$("#localSide h2 img").removeClass("current");
$(this).addClass("current");
}else{
return false;
}
});

そのときにclass="current"となっている画像のみ(<img class="current"～>)にsrcの値を切り替えたいのですがどのような記述をすればいいのでしょうか。
以下のようなイメージです。
<img src="images/menu/bottun_off.gif">
↓
<img class="current" src="images/menu/bottun_on.gif">

もし、imgにcurrentというclass名を持っていたら、その画像のsrc属性の値の_off.を_on.に差し替えるというようにしたいのですが、その画像の指定がうまくいきません。本当に困ってます。よろしくお願いします。

回答No.1

mtaka2 · ベストアンサー

jQuery の each を使えば、個々のエレメントに対して操作が行えます。

あとは、質問には _off → _on しか書いてませんが、「current が無いものは _on →_off に」する必要もあると思いますので、両方あわせると、
---ここから---
$("#localSide h2 img").each(function(index, element) {
$(element).attr("src", $(element).attr("src").replace("_on", "_off"));
});
$("#localSide h2 img.current").each(function(index, element) {
$(element).attr("src", $(element).attr("src").replace("_off", "_on"));
});
---ここまで---
といった形になるでしょうか。これを $(this).addClass("current"); の次あたりに入れておけば、img src の切り替えができます。

・別解
img ではなく、スタイルシートの方で画像を指定するようにしておけば、src を書き換える必要はありません。また、
img 要素ではなく h2 要素をクリックした時に切り替える、といったことも簡単に表現できます。
---ここから---
<style>
#localSide h2 span.button { background-image: url(images/menu/button_off.gif); display: inline-block; width: 20px; height: 20px; text-indent: -9999px; }
#localSide h2.current span.button { background-image: url(images/menu/button_on.gif); }
</style>
<script><!--
$(document).ready(function() {
$("#localSide h2").click(function(){
if($(this).attr("class") != "current"){
$("#localSide h2.current").removeClass("current");
$(this).addClass("current");
}else{
return false;
}
});
});
//--></script>
(略)
<div id="localSide">
<h2><span class="button">button image</span>text</h2>
<h2><span class="button">button image</span>text</h2>
</h2>
</div>
---ここまで---
といった形になります。

お礼

詳しいご説明ありがとうございます。
昨晩、ずっと試行錯誤していて、
eachでいけるとわかったんですが、
自分のは無茶苦茶な書き方だと思うので、
ぜひこちらを参考にさせていただきます。

スタイルでの代案もありがとうございます。
そうですよね。class名で判断して切り替えるなら、
そっちのほうが自然ですよね。

取り急ぎ、お礼まで。