javascript - 关闭图像后，​​Photoswipe pswp类未清除

我的网站上有一个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/class。该类需要以某种方式改回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

最佳答案

您可能已经解决了这个问题，但是如果有人摔倒了。

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

发生这种情况的原因是，在init函数中，将检索并缓存pswp元素的当前类名称，然后在销毁时恢复该类名称。当第二次打开发生而未销毁时，称为_initialClassName的值将设置为class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"
photoswipe.js的776行，其中设置了initialclass

_initalClassName = template.className;

在浏览器中对此断点，以查看打开时是否多次调用它

942行起销毁功能

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

在浏览器中对此断点，以确保每次调用open时都被调用

最终解决方案

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

为了解决这个问题，您只需要在关闭弹出窗口时取消绑定(bind)单击处理程序，就可以在$(".picture").off('click');函数内部的某个位置使用closeListing()来做到这一点。

关于javascript - 关闭图像后，​​Photoswipe pswp类未清除，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31127896/