【jQuery】 bodyIDを参照して画像を置換する方法
先ほどまで、どーやればいいのかなーと考え考えやってみたので備忘録のために記事にします。
記事内のソースは好きに流用でもなんでもしてください。
やりたいこと
例えばグロナビなどでSSIを使ってて、すべてのページで共通利用している場合に各カテゴリでのstay表示をどーしようかいろいろ試行錯誤してました。
そして、私はけっこうな頻度でbodyにそのカテゴリを示すIDを付けていろいろとやることが多いので、これのbodyIDを使って画像の置換ができれば楽ちんだなーと思いやってみました。ていうか、世の中的にはみなさまとっくにやってることでしょうが、今更やってみたのです。
というわけで、
「bodyIDを参照して画像を置換する方法」です。
HTML
- body
<body id="btnA">
ボディに好きなIDを振っておきます。なんでもいいです。仮に「btnA」などと書いてますが、普通にカテゴリ名「company」とかなんでも大丈夫です。
- グロナビ
<ul class="imgReplace">
<li class="btnA"><a href=""><img src="common/img/btn_A-off.png" alt="ボタンA" width="192" height="100"></a></li>
<li class="btnB"><a href=""><img src="common/img/btn_B-off.png" alt="ボタンB" width="192" height="100"></a></li>
<li class="btnC"><a href=""><img src="common/img/btn_C-off.png" alt="ボタンC" width="192" height="100"></a></li>
<li class="btnD"><a href=""><img src="common/img/btn_D-off.png" alt="ボタンD" width="192" height="100"></a></li>
<li class="btnE"><a href=""><img src="common/img/btn_E-off.png" alt="ボタンE" width="192" height="100"></a></li>
</ul>
画像を置換したい対象のナビをulで組んで、ulに「imgReplace」とclassを付けます。各liにはclassでbodyに振った各IDを付けていきます。ここでは、仮にbtnA～btnEとしてます。
今回は、bodyIDがbtnAの場合に、btnAというclassが付いているliに属するimgを置換していこうと思います。
jQuery
//--- image replace ---------------------------------------------------------------//
var bodyID = $('body').attr('id');
$('.imgReplace li').each(function() {
var navClass = $(this).attr('class');
var targetImg = $(this).find('img');
if (navClass == bodyID) {
$(targetImg).attr('src',$(targetImg).attr('src').replace('-off','-on'));
};
});
これだけです。
一応、1行ずつ解説してみます。・・・自信ないけど。
2行目の「var bodyID = $('body').attr('id');」でそのページのIDを取得します。
4行目からが画像置換の命令になるのですが、「$('.imgReplace li').each(function() { ～ });」は「imgReplaceというclassの中の各liで」という命令です。そのあと、
「var navClass = $(this).attr('class');」でそのliのclass名を取得して、実際に置換したい画像を「var targetImg = $(this).find('img');」で変数に入れておきます。
「if (navClass == bodyID)」でbodyIDとliのclass名を見比べて、同一だった場合に「$(targetImg).attr('src',$(targetImg).attr('src').replace('-off','-on'));」で画像置換をしています。
無駄な記述も多々あると思いますが・・・。IE8～とchromeで動作確認できました。
今日からがんばると宣言した日に2回目の投稿！
素晴らしい。明日もがんばろう。
このテンプレートだとソース書いたときに超絶見にくいので違うテンプレートを探そうと思います。
