Question

我有一个由单张图片和照片组成的图片库。对于后者，我添加额外的div来并排放置它们。以下是我的HTML：

<div class="container">

<article>
<figure>
<div data-layout="1212" id="justified">
<div class="photoset-row photoset-row-1" style="overflow: hidden;">
<div class="photoset-cell" style="display:inline-block;overflow:hidden;vertical-align:top;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;"><img src="https://unsplash.it/1200/900/?image=702" data-width="1200" data-height="900" style="width: 100%; height: auto; display: block; opacity: 1;"></div>
</div>
<div class="photoset-row photoset-row-2" style="margin-top: 3px; overflow: hidden;">
<div class="photoset-cell" style="display: inline-block; overflow: hidden; vertical-align: top; width: 50%; box-sizing: border-box; padding-right: 1.5px;"><img src="https://unsplash.it/1200/900/?image=695" data-width="1200" data-height="900" style="width: 100%; height: auto; display: block; opacity: 1;"></div>
<div class="photoset-cell" style="display: inline-block; overflow: hidden; vertical-align: top; width: 50%; box-sizing: border-box; padding-left: 1.5px; float:right;"><img src="https://unsplash.it/1200/900/?image=675" data-width="1200" data-height="900" style="width: 100%; height: auto; display: block; opacity: 1;"></div>
</div>

</div>
</article>
</figure>

<article>


<figure class="post post--photo" role="img">
<img class="post__img" src="https://unsplash.it/1200/900/?image=511" data-width="1200" data-height="900">
</figure>

</article>


<article>

<figure class="post post--photo" role="img">
<img class="post__img" src="https://unsplash.it/1200/900/?image=514" data-width="1200" data-height="900">
</figure>

</article>

然后我使用jQuery为Photoswipe创建一个数组，如下所示：

'use strict';

/* global jQuery, PhotoSwipe, PhotoSwipeUI_Default, console */

(function($) {

// Init empty gallery array
var container = [];

// Loop over gallery items and push it to the array
$('article').find('figure, .photoset-cell').each(function() {
var $link = $(this).find('img, video'), 
  item = {
    src: $link.attr('src'),
    w: $link.data('width'),
    h: $link.data('height'),
  };
container.push(item);
}), 

// Define click event on gallery item
$('img, video').click(function(event) {

// Prevent location change
event.preventDefault();

// Define object and gallery options
var $pswp = $('.pswp')[0],
  options = {
    index: $(this).closest('figure, .photoset-cell').index('figure, .photoset-cell'),
    bgOpacity: 0.9,
    showHideOpacity: true,
  };
// Initialize PhotoSwipe
var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options);
gallery.init();
});

}(jQuery));

除了一件事之外，一切正常：照片阵列中的第一个图像被添加到阵列两次。我怎样才能防止这种情况发生？

您可以在此处看到演示： https://codepen.io/anon/pen/MOprem

Answer 1

您的问题是您的photoset-cell div包含在<figure>元素中。所以这段代码：

$('article').find('figure, .photoset-cell')

找到<figure>元素并推送其中的第一个图像，即

<img src="https://unsplash.it/1200/900/?image=702"

然后找到第一个photoset-cell（图像702的那个）并再次按下其中的图像。因此，您可以在图库中获得第一张图像的两个副本。

最简单的解决方法是删除<figure> div周围的photoset-cell元素。如果由于布局原因不可能，那么根据您提供的代码，最简单的修复可能是更改此行：

$('article').find('figure, .photoset-cell').each(function() {

为：

$('article').find('figure.post, .photoset-cell').each(function() {

防止将相同的图像添加到阵列两次

1 个答案: