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 

... 

});