jQuery Click事件未循环。 它只工作第一次

Question

我试图制作一个图库，其中的按钮上显示“查看所有照片”，方法是单击该框，隐藏的照片将扩展，按钮文本将变为“隐藏所有照片”。

然后，在单击“隐藏所有照片”之后，展开的图像将正确折叠，并且按钮文本将变为“查看所有照片”。 其实我想做这个。

但是问题是它只能工作一次。 当我第二次尝试单击“查看所有照片”时，隐藏区域没有扩大，按钮文本也没有改变。

$(document).ready(function() {

            //Gallery Show all photos
            $('.trigger-details > button').click(function(){
                $('.single-gallery-image.hidden-lg').removeClass('hidden-lg').addClass('gallery-expanded');
                $(this).addClass('hide-button').text('Hide All Photos');

                $('.hide-button').click(function(){
                    $('.gallery-expanded').removeClass('gallery-expanded').addClass('hidden-lg');
                    $(this).removeClass('hide-button').text('View All Photos');
                });
            });

        });

Answer 1

$('.hide-button').click()是用于将事件委派给DOM元素的工具。

然后，在该语句的内部执行$(this).removeClass('hide-button') 。

因此，它将丢失其类，并且由于第一个事件仅被委托/调用了一次，因此您无法再次附加它。 最好有一个控制两个状态的事件（不像这里那样嵌套）。

$('.trigger-details > button').click(function(){
    if ($(this).hasClass('hide-button')) {
        // do your showing logic
    } else {
        // do  your hiding logic
    }
});

Answer 2

尝试将点击事件设置在文档级别，而不是嵌套在第一次点击中

$(document).on('click','.trigger-details > button', function(){
    $('.single-gallery-image.hidden-lg').removeClass('hidden-lg').addClass('gallery-expanded');
    $(this).addClass('hide-button').text('Hide All Photos');
});
$(document).on('click','.hide-button', function(){
    $('.gallery-expanded').removeClass('gallery-expanded').addClass('hidden-lg');
    $(this).removeClass('hide-button').text('View All Photos');
});