JQuery изображение всплывающий код, удаление классов на клик, отказываясь работать

Question

Так что я создаю функцию, которая будет увеличивать изображение при нажатии и сжимать изображение при повторном нажатии.

Это основной CSS для обоих больших и маленьких изображений:

.bigpic { 
position: absolute; 
width:40%; 
z-index: 100; 
} 
.smallpic { 
width:20%; 
} 

И это JQuery:

$(document).ready(function() { 

$('.smallpic').click(function() { 
    $('.bigpic').removeClass('bigpic'); 
    $(this).removeClass('smallpic'); 
    $(this).addClass('bigpic'); 
    $('body').append("<button class='imgbutton'>Close</button>"); 
    }) 

$('.bigpic').click(function() { 
    $(this).addClass('smallpic'); 
    $(this).removeClass('bigpic'); 
    }) 
$('.imgbutton').click(function() { 
    $('.bigpic').addClass('smallpic') 
    $('.smallpic').removeClass('bigpic') 
}) 
}); 

Как вы можете видеть, что я сделал это добавить «биографический фильм» и удалить «smallpic» классы, я также пробовал как альтернативный метод, добавляя кнопку, которая закрывала бы ее. Однако ни одно из способов нажатия на изображение или кнопку не вернет изображение в прежнее состояние.

Answer 1

В то время, когда вы привязываете обработчики событий, элементы не имеют этих классов, поэтому обработчики событий не привязаны к ним.

Один из способов решения этой проблемы - использовать делегирование событий. Другой способ - изменить вашу логику.

С делегацией событий, вы связать обработчик предка элементов, но есть обработчик выполнить только тогда, когда click событие происходит на этих элементах:

$(document).on('click', '.smallpic', function() { 
    $('.bigpic').removeClass('bigpic'); 
    $(this).removeClass('smallpic'); 
    $(this).addClass('bigpic'); 
    $('body').append("<button class='imgbutton'>Close</button>"); 
}); 

$(document).on('click', '.bigpic', function() { 
    $(this).addClass('smallpic'); 
    $(this).removeClass('bigpic'); 
}); 

Но, возможно, лучше всего было бы добавить a pic класс для всех элементов изображения и привязка одного обработчика события. Вы можете использовать .toggleClass() для переключения классов или даже использовать .hasClass() для выполнения другой условной логики.

$('.pic').click(function() { 
    var $img = $(this); 
    $img.toggleClass('bigpic'); 
    $img.toggleClass('smallpic'); 
}); 

Answer 2

Как насчет переключаясь между классами:

$('.imgbutton').click(function() { 
    $(this).toggleClass('smallpic bigpic'); 
})