猫头鹰传送带2移除特定项目

2024-05-20 • 问答

我使用Owl Carousel 2，并且我的HTML代码如下。每个图像在右上角都将带有一个小的“ x”图标，当我单击该按钮时，我希望将其从轮播中删除。

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

例如：第一次单击image2.jpg，传递给“ remove_image”的索引为1，这是正确的。已从“猫头鹰轮播” 2中正确删除图像。

第二次单击image4.jpg，传递给“ remove_image”的索引为3。此索引是错误的。这是因为在删除了image2之后，Owl Carousel 2已更新。现在，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');
}

在对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-stage位于用户提供的容器和项目之间，包装这些项目。 .owl-item包装每个项目，它们是.owl-stage的子项。

参考：

猫头鹰传送带2移除特定项目

iCMS 回答：猫头鹰传送带2移除特定项目

大家都在问