JQuery удалить класс и добавить в другой div не работает

Question

JQuery удалить класс и добавить в другой div не работает

0

У меня есть галерея из трех изображений, выстроившихся рядом друг с другом. Начнем с того, что центральное изображение велико и два изображения с обеих сторон малы. Когда вы нажимаете левое изображение (например), среднее и правое изображение сдвигаются на 100 пикселей, а левое изображение становится большим. Затем, например, если вы снова нажмете на среднее изображение, 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/

Sam Skirrow 26 сен. 2013, в 18:09

Источник

Теги:

jquery

jquery-animate

removeclass

addclass

1 ответ

Ещё вопросы

Donovan Charpin · Accepted Answer · 2013-09-26T14-13-00.000Z

Вы не можете поставить if хотите. Это событие, которое запускает код. Когда у вас есть событие click, вы можете поставить условие.

Попробуйте что-то вроде этого:

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

// if has class run this code

// else if has this class, run this code

...

});