javascript - 如何将 fancybox 与 filterizr 一起使用，以便只有过滤后的项目出现在图片库中？

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'
})