猫头鹰轮播2:过滤项目，但使用Java脚本保持排序 [英] Owl Carousel 2: filtering items, but keep the sort order using Javascript

问题描述

我目前正在使用Owl Carousel 2，并将其与此过滤示例结合起来以创建过滤器菜单，当单击过滤器菜单列表中的标题时，该轮播中的所有其他项目都会消失. 这非常有效，除了单击"SHOW"并且所有项目返回转盘时，它们与启动时的顺序不同.

I'm currently using Owl Carousel 2 and combining it with this filtering example to create a filter menu that when titles in the filter menu list are clicked all other items in the carousel disappear. This works really well except that when SHOW is clicked and all items return to the carousel they are not in the order they started.

猫头鹰轮播2 http://www.owlcarousel.owlgraphic.com/docs/api-options.html

过滤器 http://www.xcast3d.com/spotlight/bootstrap-carousel-filter/

我需要他们保持其排序顺序.也许有一种更好的方法可以简单地使用css display:none来过滤它们?但我不确定该怎么写.也许有人可以帮助我更改此脚本，或者想出一种更好的筛选解决方案来保持顺序.非常感谢

I need them to keep their sort order. Perhaps there is a better way to filter them simply using css display:none? but I'm not sure how to write this. Perhaps someone can help me alter this script or think of a better filtering solution to keep the order. Many Thanks

推荐答案

我找到的解决方案是复制隐藏div中的所有项目，并在过滤时清空轮播，并仅在初始位置再次添加过滤后的元素订单.

The solution I've found is to copy all items in the hidden div, and on filtering, empty the carousel and add again only the filtered elements in the initial order.

在这里工作的小提琴: http://jsfiddle.net/TWtwt/301/

Working Fiddle here : http://jsfiddle.net/TWtwt/301/

$('#projects-copy .project.' + cat).each(function () {
   owl.addItem($(this).clone());
});

这篇关于猫头鹰轮播2:过滤项目，但使用Java脚本保持排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！