jQueryを使ってある画像を別の画像に置き換えたい。 jQueryを使って、の時にだけの中の画像「info.gif」を「info_on.gif」に置き換えるということをしたいです。 ↓↓↓ どのように記述をしてやるとうまくいきますでしょうか。色々試しているのですがうまくいきません。よろしくお願いします。

bodyのクラスは動的に変わるのでしょうか？それともonload時にチェックすればよいだけ？とりあえず、ロード時に設定すればよいだけなら、jquery使うまでもなさそうな気がしますが、jqueryというご質問なので… ＞の中の画像「info.gif」を「info_on.gif」にという言葉通りに書くなら、 $(function() { if ($("body").hasClass("info")) { $("#global-nav img[src$='info.gif']").each(function() { $(this).attr("src", "info_on.gif"); }); } }); みたいな感じでしょうか？

jQueryを使ってある画像を別の画像に置き換えたい。

解決済

質問者：Java-Java
質問日時：2010/09/16 19:29
回答数：3件

jQueryを使ってある画像を別の画像に置き換えたい。

jQueryを使って、<body class="info">の時にだけ
<ul id="global-nav">の中の画像「info.gif」を「info_on.gif」に
置き換えるということをしたいです。

<body class="info">
<ul id="global-nav">
<li><img src="info.gif" /></li>
<li><img src="about.gif" /></li>
</ul>
</body>

↓↓↓

<body class="info">
<ul id="global-nav">
<li><img src="info_on.gif" /></li>
<li><img src="about.gif" /></li>
</ul>
</body>

どのように記述をしてやるとうまくいきますでしょうか。
色々試しているのですがうまくいきません。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2010/09/16 21:35

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");
});
}
});

みたいな感じでしょうか？

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！

教えていただいた方法ですと、画像のリンクを絶対パスにしないといけなかったので、下記に変更させていただきました。
$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))

ちなみにJavaScriptだけですと、どのように書くのでしょうか。
後学のために教えていただけないでしょうか。

通報する

お礼日時：2010/09/16 22:38

No.3

回答者： yyr446
回答日時：2010/09/17 10:37

　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"
　 }
　}
}

- 0
- 件

通報する

No.2

回答者： yyr446
回答日時：2010/09/17 10:27

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>