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

我的网站上有一个Photoswipe(http://photoswipe.com)图片库,并且在我第二次关闭图库后,css类没有重置/清除以删除视图.

恩.
用户打开第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 – 可见“正如你所见

photoswipe.js的第776行,其中设置了initialclass

_initalClassName = template.className;

在浏览器中断点,查看打开时是否多次调用它

942行以后破坏功能

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

在浏览器中断点,以确保每次调用open时都会调用它

最终解决方案

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

要解决此问题,您只需要在关闭弹出窗口时取消绑定点击处理程序,您可以使用$(“.picture”).off(‘click’);在closeListing()函数内的某个地方

标签：javascript,jquery,css,ajax,photoswipe
来源： https://codeday.me/bug/20190724/1527498.html