Owl Carousel 2 移除特定项目

Question

我使用 Owl Carousel 2，我的 HTML 代码如下。每张图片的右上角都会有一个小“x”图标，点击后我希望将图片从轮播中移除。

第一次点击时，效果很好，因为传递给“remove_image”函数的索引是正确的。但再次点击另一张图片时，索引将不再正确。

例如： 第一次点击image2.jpg，传递给“remove_image”的索引是1，这是正确的。图片已从 Owl Carousel 2 中正确移除。

第二次点击image4.jpg，传递给“remove_image”的索引是3。这个索引是错误的。这是因为 Owl Carousel 2 在 image2 被移除后更新了。 image4.jpg 现在的正确索引是 2。

我该如何解决这个问题？请帮忙。谢谢。

<div class="owl-carousel owl-theme">
    <div class="item"><img src="/image1.jpg" /><a onclick="remove_image(0);"><i class="icon-remove"></i></a></div>
    <div class="item"><img src="/image2.jpg" /><a onclick="remove_image(1);"><i class="icon-remove"></i></a></div>
    <div class="item"><img src="/image3.jpg" /><a onclick="remove_image(2);"><i class="icon-remove"></i></a></div>
    <div class="item"><img src="/image4.jpg" /><a onclick="remove_image(3);"><i class="icon-remove"></i></a></div>
    <div class="item"><img src="/image5.jpg" /><a onclick="remove_image(4);"><i class="icon-remove"></i></a></div>
    <div class="item"><img src="/image6.jpg" /><a onclick="remove_image(5);"><i class="icon-remove"></i></a></div>
</div>

function remove_image(index) {
    $('.owl-carousel').owlCarousel('remove', index).owlCarousel('update');
}

Answer 1

您在调用remove_image 时使用了固定索引。由于这些不会随着项目的删除而更新，因此这些固定索引变得不准确。

一个快速（但不一定是最好的）解决方法是使用this，而不是固定索引，传递锚元素本身，然后让您的函数从中派生目标索引：

<div class="owl-carousel owl-theme">
    <div class="item"><img src="/image1.jpg" /><a onclick="remove_image(this);"><i class="icon-remove"></i></a></div>
    <!-- more slides -->
</div>

function remove_image(trigger) {
    var $item = $(trigger).closest('.owl-item');
    var index = $item.closest('.owl-stage').children().index($item);
    $item.closest('.owl-carousel').owlCarousel('remove', index).owlCarousel('update');
}

.owl-stage 和 .owl-item 是初始化 owl carousel 时添加的几个元素中的一部分。 .owl-stage 位于用户提供的容器和项目之间，包装这些项目。 .owl-item 包装每个项目并且是 .owl-stage 的子项。

参考资料：

• this in the context of event handlers
• jQuery's .index()
• jQuery's .closest()