サムネイル画像の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>

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

回答No.1

t_ohta · ベストアンサー

以下のような感じでどうでしょう。
$('#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;
});
});
});

お礼

t_ohtaさん

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

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

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