jQuery删除类并添加到另一个无法工作的div

我有一个画廊，里面有3幅图像，彼此相邻排列。首先，中心图像较大，两侧的两个图像较小。当您单击左图像（例如）时，中图像和右图像将在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');
  });
}

---

以下是我的一部分工作：

如果是这样的话，你就不能把

放进去。它是运行代码的事件。当您有
点击
事件时，您可以输入您的条件

试试这样的方法：

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

// if has class run this code

// else if has this class, run this code

...

});

谢谢，这帮了大忙