标签：javascript jquery css ajax photoswipe
我的网站上有一个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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。