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ベストアンサー
- 回答日時:
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名で判断して切り替えるなら、
そっちのほうが自然ですよね。
取り急ぎ、お礼まで。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
繰り返し処理のシンプルな書き方
-
多数のCPUを使い同期処理をした...
-
SQLのmaxで求めた値を変数に代...
-
変数にドットをいれることはか...
-
jQueryのblockUIをformのボタン...
-
JSONをperlで受け取る方法
-
アコーディオンメニューをブラ...
-
二つのbxsliderをレスポンシブ...
-
JavaScriptでtabindexの変更っ...
-
Javascriptを使ってQRコード読...
-
AjaxでJSONを受信すると、文字...
-
ページ内リンクで#などのアンカ...
-
<input>のvalue値をプルダウン...
-
Selenium Basicの件
-
JavascriptからPHPへのAjax通信...
-
スライドを最後の画像で止めたい
-
inputタグ内にあるid属性の意味?
-
JQueryの変数の扱いで弱ってい...
-
変数の内容を別functionに渡したい
-
jQueryのアコーディオン一番目...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのgetでJSPを呼び出したい
-
要素内を常に一番下を表示させたい
-
【javascript文法】 prototype...
-
jQueryで、複数条件の絞り込み機能
-
ローカルでのonreadystatechang...
-
JQueryでAjax通信をキャンセル...
-
画面移遷なしで画像アップロー...
-
jqueryでリンクを無効にしたあ...
-
jqueryについて
-
繰り返し処理のシンプルな書き方
-
jqueryで特定のIDに対して
-
jQueryでloadしたページ内でもj...
-
jQuery 並列load処理
-
ある条件の画像のみ表示を切り...
-
jqueryの関数?について
-
jqueryで読み込みが終わった画...
-
アコーディオンメニューについて
-
jqueryでテキストエリア監視に...
-
AJAXでのリロードに関して
-
ドラッグ & ドロップでのド...
おすすめ情報