Повторное изменение класса при клике на изображение
Всем привет! )
Есть родительский div, в котором находится миниатюра изображения: <div> <img src='preview-1.jpg' class='image-preview'> </div> При клике на эту миниатюру: (1) в её src путь меняется на путь к полному изображению, (2) меняется класс - для полного изображения class image-full, и (3) для родительского слоя добавляется атрибут clear:left;
$('.image-preview').click(function(){
$(this).attr('src', $(this).attr('src').replace('preview-', 'full-'));
$(this).removeClass().addClass('image-full');
$(this).parent('div').css('clear', 'left');
});
Всё это работает отлично, но я не могу осуществить обратный процесс. После первых действий имею: <div style="clear:left;"> <img src='full-1.jpg' class='image-full'> </div> Теперь при клике на полное изображение пытаюсь вернуть миниатюру, то есть совершить обратные действия:
$('.image-full').click(function(){
$(this).attr('src', $(this).attr('src').replace('full-', 'preview-'));
$(this).removeClass().addClass('image-preview');
$(this).parent('div').css('clear', 'none');
});
Но результата нет увы :( Какие есть мысли? |
mi.rafaylik,
Как вариант использовать on |
<style type="text/css">
div.full-active {
clear:left;
}
</style>
<div>
<img src='preview-1.jpg' class='image preview'>
</div>
<script type="text/javascript">
$('img.image').click(function(){
$(this).toggleClass('preview').toggleClass('full');
$(this).parent().toggleClass('full-active');
var a=$(this).attr('src');var b=a.replace('preview','full')
if(a==b){b=a.replace('full','preview');}
$(this).attr('src',b);
});
</script>
|
Deff, огромное спасибо, решение шикарное!
Исправил только .parent на .parent('div') :) |
| Часовой пояс GMT +3, время: 22:39. |