jQuery删除类，并添加到另一个div不工作

Question

我有一个3张图片相邻排列的画廊。首先，中心图像很大，两面图像都很小。当你点击左侧图像时（例如）中间和右侧图像滑动超过100px，左侧图像变大。然后，例如，如果再次单击中间图像，则3张图像向右滑动，中间图像再次变大，依此类推。

我写的代码似乎并没有工作到目前为止，外部divs点击时放大，但不再收缩，中间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/

Answer 1

你不能把if这样。这是运行代码的事件。当你有click事件，你可以把你的条件。

尝试用这样的事情：

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

// if has class run this code 

// else if has this class, run this code 

... 

});