0

隣り合わせに並んだ3つの画像のギャラリーがあります。まず、中央の画像が大きく、左右の 2 つの画像が小さいです。左の画像をクリックすると（例えば）真ん中と右の画像が100px以上スライドして左の画像が大きくなります。次に、たとえば中央の画像をもう一度クリックすると、3 つの画像が右にスライドし、中央の画像が再び大きくなります。

私が書いたコードはこれまでのところうまくいかないようです。クリックすると外側のdivが拡大しますが、再び縮小することはなく、中央のdivはクリックしても何もしません。

誰かが私のコードの何が問題なのか教えてもらえますか:

if($('.main_image').hasClass('active_image')){
  $('.second_image').click(function () {
$('#images_holder').animate({
  left: "+100"
});
$('.main_image').removeClass('active_image')    ;
$(this).addClass('active_image');
  });
}
if($('.main_image').hasClass('active_image')){
  $('.third_image').click(function () {
$('#images_holder').animate({
  left: "-100px"
});
$('.main_image').removeClass('active_image')    ;
$(this).addClass('active_image');
  });
}
if($('.second_image').hasClass('active_image')){
  $('.main_image').click(function () {
$('#images_holder').animate({
  left: "0px"
});
$('.second_image').removeClass('active_image')  ;
$(this).addClass('active_image');
  });
}
if($('.second_image').hasClass('active_image')){
  $('.third_image').click(function () {
$('#images_holder').animate({
  left: "-100px"
});
$('.second_image').removeClass('active_image')  ;
$(this).addClass('active_image');
  });
}
if($('.third_image').hasClass('active_image')){
  $('.main_image').click(function () {
$('#images_holder').animate({
  left: "0px"
});
$('.third_image').removeClass('active_image')   ;
$(this).addClass('active_image');
  });
}
if($('.third_image').hasClass('active_image')){
  $('.second_image').click(function () {
$('#images_holder').animate({
  left: "+100px"
});
$('.third_image').removeClass('active_image')   ;
$(this).addClass('active_image');
  });
}

ここに私の作品の JSfiddle があります: http://jsfiddle.net/QS3BW/3/

4

1 に答える 1

1

そのように置くことはできませんif。コードを実行するイベントです。イベントがあるときは、click条件を入れることができます。

次のようなものを試してください：

$("#images_holder").children().click(function(){

// if has class run this code

// else if has this class, run this code

...

});
于 2013-09-26T15:22:57.633 に答える