- ベストアンサー
jQueryを使って画像を置き換える方法
- jQueryを使用して画像を別の画像に置き換える方法について説明します。
- 具体的な要件は、<body class="info">の時にだけ<ul id="global-nav">の中の画像「info.gif」を「info_on.gif」に置き換えることです。
- 試行錯誤しているがうまくいかない場合についても対策方法を提案します。
- Java-Java
- お礼率48% (81/166)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
bodyのクラスは動的に変わるのでしょうか？ それともonload時にチェックすればよいだけ？ とりあえず、ロード時に設定すればよいだけなら、jquery使うまでもなさそうな気がしますが、jqueryというご質問なので… ＞<ul id="global-nav">の中の画像「info.gif」を「info_on.gif」に という言葉通りに書くなら、 $(function() { if ($("body").hasClass("info")) { $("#global-nav img[src$='info.gif']").each(function() { $(this).attr("src", "info_on.gif"); }); } }); みたいな感じでしょうか？
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
var class = はまずかったです。IEに怒られました。 Classなら怒られないです。 function func(){ var Class = document.body.getAttribute("class").split(" "); for(var i=0;i<Class.length;i++){ if(Class[i]=="info"){ var t=document.querySelectorAll("#global-nav img[src='info.gif']"); t[0].src="info_on.gif" } } }
- yyr446
- ベストアンサー率65% (870/1330)
jQuery使わずに、でも「Selector API」は使う。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>kasu</title> <style type="text/css"></style> <script type="text/javascript"> if('undefined' !== typeof window.addEventListener) window.addEventListener('load',func,false); else if ('undefined' !== typeof window.attachEvent) window.attachEvent('onload',func); function func(){ var class = document.body.getAttribute("class").split(" "); for(var i=0;i<class.length;i++){ if(class[i]=="info"){ var t=document.querySelectorAll("#global-nav img[src='info.gif']"); t[0].src="info_on.gif" } } } </script> </head> <body class="info"> <ul id="global-nav"> <li><img src="info.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> </html>
お礼
ありがとうございます！ 教えていただいた方法ですと、画像のリンクを絶対パスにしないといけなかったので、下記に変更させていただきました。 $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")) ちなみにJavaScriptだけですと、どのように書くのでしょうか。 後学のために教えていただけないでしょうか。