javascript - 关闭图像后 Photoswipe pswp 类不清除

Question

我的网站上有一个 Photoswipe ( http://photoswipe.com) 图片库，在我第二次关闭图片库后，CSS 类没有重置/清除以删除 View 。

例如。 用户打开元素 1，AJAX 将图形填充到图片 div 中。 用户单击元素 1 中的图像，Photoswipe 正确打开图像(设置以下类):

class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"

用户关闭元素 1 中的图像，类重置为正常:

class="pswp"

用户关闭元素 1，JS/JQuery 清除图片 div 中的所有 html。用户打开元素 2，AJAX 将图形填充到图片 div 中。用户单击元素 2 中的图像，Photoswipe 打开图像正确设置与以前相同的类。

class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"

这就是问题所在。用户关闭元素 2 中的图像，唯一发生变化的是:

aria-hidden="true"

但是类没有清除，它仍然是:

class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"

什么时候应该更改为:

class="pswp"

这将禁用网站上的所有交互，因为在所有内容之上都有一个不可见的 div/类。该类需要以某种方式改回 pswp。

AJAX/JS 填充图片 div(我向 div 添加了一个 id):

if (i == 0) {
    $('#listing_photos_container').append('<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"><a href="' + json[i].image_url + '" itemprop="contentUrl" data-size="512x400" data-index="' + i + '"><img src="' + json[i].image_url + '" height="400" width="600" itemprop="thumbnail" alt="listingPhoto" class="listing-photo"></a></figure>');
} else {
    $('#listing_photos_container').append('<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="listing-photo-holder"><a href="' + json[i].image_url + '" itemprop="contentUrl" data-size="512x400" data-index="' + i + '"><img src="' + json[i].image_url + '" height="400" width="600" itemprop="thumbnail" alt="listingPhoto" class="listing-photo-holder"></a></figure>');
 }

JS/JQuery 清除图片 div:

 $('#listing_photos_container').html('');

编辑:当用户单击照片以全屏显示时，单击监听器功能运行两次。这是监听器的代码:

$.ajax({
    type: "POST",
    url: 'http://example.com/action?action=photos',
    data: {id: id},
    success: function (data) {
        console.log('API Call - Photos');
        json = JSON.parse(data);
        $('#listing_photos_container').html('');
        for (var i = 0; i < json.length; i++) {
            // Styling code here
        }
        $('#list_header').html(
            (function($) {
                $('.picture').each( function() {
                    var $pic = $(this),
                    getItems = function() {
                        var items = [];
                        $pic.find('a').each(function() {
                            var $href = $(this).attr('href'),
                                $size = $(this).data('size').split('x'),
                                $width = $size[0],$height = $size[1];
                            var item = {
                                src : $href,
                                w   : $width,
                                h   : $height
                            }
                            items.push(item);
                        });
                        return items;
                    }
                    var items = getItems();
                    console.log('Items for PSWP' + items); 
                    alert('Alert Point 1'); // This is called once, (as it should).
                    var $pswp = $('.pswp')[0];
                    $pic.on('click', 'figure', function(event) {
                        // This block is called twice..
                        alert('Click Funct');
                        event.preventDefault();
                        var $index = $(this).index();
                        var options = {
                            index: $index,
                            bgOpacity: 0.7,
                            showHideOpacity: true
                        }
                        // Initialize PhotoSwipe
                        alert('Setting new PhotoSwipe');
                        var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
                        lightBox.init();
                    }); // End $pic.on
                });// End .picture each
            })(jQuery)
        ); // End list_header.html
    } // End AJAX Success
}); // End AJAX

Answer 1

您可能已经修复了此问题，但以防万一其他人遇到此问题。

如果您多次触发打开画廊而不关闭它，就会发生这种情况。可能是您注册了多个点击处理程序来打开图库，或者由于某种原因事件被触发了两次。

这是因为在 init 函数中检索并缓存了 pswp 元素的当前类名，然后在销毁时恢复类名。当第二次打开时没有销毁被调用 _initialClassName 将被设置为 class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--动画输入 pswp--可见” 如您所见

photoswipe.js 的第 776 行设置了 initialclass

_initalClassName = template.className;

在你的浏览器中断点它，看它是否在打开时被多次调用

942行以后的销毁函数

destroy: function() {
    _shout('destroy');

在您的浏览器中对其进行断点以确保每次调用 open 时都会调用它

最终解决方案

问题是，当打开弹出窗口并加载图像时，您正在用照片填充 #listing_photos_container，然后添加点击处理程序以打开 photoswipe。此点击处理程序已添加到顶部元素，因此在弹出窗口关闭时将保留，然后在下次打开时将添加一个新的点击处理程序。

要解决此问题，您只需在关闭弹出窗口时取消绑定(bind)点击处理程序，您可以使用 $(".picture").off('click'); 在您的 closeListing() 函数