javascript - 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() 用于将事件委托(delegate)给 DOM 元素。

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

因此它失去了它的类，并且由于第一个事件只被委托(delegate)/调用一次，你不能第二次附加它。您最好拥有一个控制两种状态的事件(不像此处那样嵌套)。

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