こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

サムネイル画像のclass切替がうまく動かない。

すみません、jquery初心者です。

下記の様にサムネイルをクリックすると、mainの画像が切り替わる画像ギャラリーを作成しておりまして、
サムネイルをクリックして class="current" を切り替えたいのですが、うまく動きません。
別のサムネイルをクリックすると、最初のclassはremoveされるのですが、
クリックしたサムネイルにclassを付けたいのですが効きません。。


$(document).ready(function() {
$(function(){
$('#sum li a').click(function(){
var h = $(this).eq(0).attr('rel');
$('#main img').fadeOut(function(){
($('#main img').attr("src",h)).fadeIn();
$('#sum li a').removeClass('current');
$(this).addClass('current');
});
return false;
})
});
});


<div class="main_area">
<p id="main"><img src="images/img01.jpg" /></p>
</div>

<ul id="sum" class="clearfix">
<li><a href="#" rel="img01.jpg" class="current"><img src="images/sum01.jpg" /></a></li>
<li><a href="#" rel="img02.jpg"><img src="images/sum02.jpg" /></a></li>
<li><a href="#" rel="img03.jpg"><img src="images/sum03.jpg" /></a></li>
</ul>

ご教授頂けると非常に助かります。
よろしくお願いします。

投稿日時 - 2013-02-18 10:39:26

QNo.7951371

すぐに回答ほしいです

質問者が選んだベストアンサー

以下のような感じでどうでしょう。
$('#main img').fadeOut(); の処理の中で $(this) とした場合、$('#main img')を指しているのでaタグのクラス名ではなく<p id="main">の中のimgタグのクラス名を書き換えていました。

$(document).ready(function() {
$(function(){
$('#sum li a').click(function(){
var h = $(this).eq(0).attr('rel');
$('#sum li a').removeClass('current');
$(this).addClass('current');
$('#main img').fadeOut(function(){
($('#main img').attr("src",h)).fadeIn();
});
return false;
});
});
});

投稿日時 - 2013-02-18 11:06:06

お礼

t_ohtaさん

ご回答ありがとうございます!

頂いた回答で無事動きました。
何とも初歩的なミスだったんですね。。

大変助かりました。有難う御座いました。

投稿日時 - 2013-02-18 11:20:24

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問