「WebデザイナーのためのjQuery入門」という書籍でjQueryの勉強をしています。リンク先 http://gihyo.jp/book/2012/978-4-7741-4856-4 この書籍の中のロールオーバーボタンのスクリプトで質問があります。以下のスクリプトは書籍に載っているスクリプトですが、これにより画像ボタンにポインタがのる・のらないでボタン画像が切り替わります。 --------------- $(function(){ $('.rollover').each(function(){ var a = $(this); var img = a.find('img'); var src_off = img.attr('src'); var src_on = src_off.replace('_off','_on'); $(' ').attr('src','src_on'); a.hover(function(){ img.attr('src',src_on); },function(){ img.attr('src',src_off); }); }); }); --------------- htmlは以下になります。※ 内のみ抜粋 --------------- --------------- 質問したいのは、スクリプトの上から3行目の「var a = $(this);」です。 var a = $(this); var img = a.find('img'); 上記を、 var img = $(this).find('img'); とした場合、なぜか画像が切り替わりません。どちらも同じような気がするのですが、不具合の原因が分かりません。お分かりの方がいっらしゃいましたら、お手数ですがご回答よろしくお願いいたします。

$(this)を変数に入れないと動作しない理由

解決済

質問者：pileny
質問日時：2014/06/19 15:20
回答数：1件

「WebデザイナーのためのjQuery入門」という書籍でjQueryの勉強をしています。

リンク先　http://gihyo.jp/book/2012/978-4-7741-4856-4

この書籍の中のロールオーバーボタンのスクリプトで質問があります。

以下のスクリプトは書籍に載っているスクリプトですが、これにより画像ボタンにポインタがのる・のらないでボタン画像が切り替わります。

---------------

$(function(){
$('.rollover').each(function(){
var a = $(this);
var img = a.find('img');
var src_off = img.attr('src');
var src_on = src_off.replace('_off','_on');
$('<img />').attr('src','src_on');
a.hover(function(){
img.attr('src',src_on);
},function(){
img.attr('src',src_off);
});
});
});

---------------

htmlは以下になります。※<body>内のみ抜粋

---------------

<body>
<div class="header">
<ul class="menu">
<li><a href="index.html" class="rollover"><img src="menu01_off.png" alt="Home"></a></li>
<li><a href="index.html" class="rollover"><img src="menu02_off.png" alt="Products"></a></li>
<li><a href="index.html" class="rollover"><img src="menu03_off.png" alt="Company"></a></li>
</ul>
</div>
</body>

---------------

質問したいのは、スクリプトの上から3行目の「var a = $(this);」です。

var a = $(this);
var img = a.find('img');

上記を、

var img = $(this).find('img');

とした場合、なぜか画像が切り替わりません。

どちらも同じような気がするのですが、不具合の原因が分かりません。

お分かりの方がいっらしゃいましたら、お手数ですがご回答よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1ベストアンサー

回答者： chie65535
回答日時：2014/06/19 16:30

＞上記を、

＞var img = $(this).find('img');
＞とした場合、なぜか画像が切り替わりません。

そうしてしまうと、aの値が設定されないから、下のほうにある

a.hover(function(){

が正常に動作しなくなる。

- 0
- 件

通報する

この回答へのお礼

さっそくのご回答ありがとうございます。

たしかに！
hoverのところを見落としていました！
試しに以下のようにすると正常に動作しました。
お手数おかけしました。

$(function(){
$('.rollover').each(function(){
var img = $(this).find('img');
var src_off = img.attr('src');
var src_on = src_off.replace('_off','_on');
$('<img />').attr('src','src_on');
img.hover(function(){
img.attr('src',src_on);
},function(){
img.attr('src',src_off);
});
});
});