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

...

});

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

1 个答案: