Question

当我使用filerizr和fancybox时，它会显示图库中的所有图像，而不是仅显示已过滤的图像。我尝试使用可见选择器仅显示可见项目，但它不起作用。有人可以帮我找到解决方案。我知道filterizr为所有被称为filteredout的过滤元素添加了一个类，但我不知道如何将这个类用于fancybox的优势

示例：https://www.mealfixer.com/index1.php

Code:
var filterizd = $('.filtr-container').filterizr({
    
});


$().fancybox({
  selector : '.shown:visible > a'
})

Answer 1

首先，您可以轻松检查是否使用了正确的选择器。只需单击链接，即可看到只有两个项目。然后打开控制台并运行$('.shown:visible > a').length - 它返回6（因为最初有6个链接）。显然，这就是fancyBox显示所有这些内容的原因。

在检查您的链接时，我注意到它们都已应用shown类名，但隐藏的链接有filteredOut。

试试这个：

$().fancybox({
  selector : '.shown:not(.filteredOut) > a'
})

如何将fancybox与filterizr一起使用，以便仅过滤的项目位于图库中？

1 个答案: