Javascript 两个部门的可过滤投资组合

我刚开始使用jquery或javascript，但我想在我的网站上创建一个可过滤的公文包。在顶部有过滤器类别，它应该过滤所有缩略图

这些缩略图位于列表ul、li中，下面是包含这5个缩略图内容的某些div。然后，列表中会再次出现一些缩略图，也会再次出现包含这些缩略图内容的div

我的代码如下所示：

过滤类别//导航

<ul class="portfolio-filter">
<li><a data-rel="all" class="folio-btn active" href="#all">Alle</a></li>
<li><a data-rel="print" class="folio-btn" href="#print">Print</a></li>
<li><a data-rel="web" id="web" class="folio-btn" href="#web">Web</a></li>
<li><a data-rel="flash" id="flash" class="folio-btn" href="#flash">Flash</a></li>
<li><a data-rel="3d" id="3d" class="folio-btn" href="#3d">3D</a></li>
<li><a data-rel="grafik" id="grafik" class="folio-btn" href="#grafik">Grafik</a></li>
</ul>

带缩略图的div：

<div class="projekte">
<ul class="stage">
<li class="pgrid web" id="ppreview1"><img src="preview-portfolio.jpg" width="100%" height="auto"><div id="poverlay1" class="overlay"><span><span class="plogo"><img src="img/desktop/small-logo-white.svg" width="30%" height="auto"></span>Projektname</span></div></li>            
<li class="pgrid web" id="ppreview2"><img src="preview-portfolio.jpg" width="100%" height="auto"><div id="poverlay2" class="overlay"><span><span class="plogo"><img src="img/desktop/small-logo-white.svg" width="30%" height="auto"></span>Projektname</span></div></li>
<li class="pgrid web" id="ppreview3"><img src="preview-portfolio.jpg" width="100%" height="auto"><div id="poverlay3" class="overlay"><span><span class="plogo"><img src="img/desktop/small-logo-white.svg" width="30%" height="auto"></span>Projektname</span></div></li>
<li class="pgrid web" id="ppreview4"><img src="preview-portfolio.jpg" width="100%" height="auto"><div id="poverlay4" class="overlay"><span><span class="plogo"><img src="img/desktop/small-logo-white.svg" width="30%" height="auto"></span>Projektname</span></div></li>
<li class="pgrid web" id="ppreview5"><img src="preview-portfolio.jpg" width="100%" height="auto"><div id="poverlay5" class="overlay"><span><span class="plogo"><img src="img/desktop/small-logo-white.svg" width="30%" height="auto"></span>Projektname</span></div></li>
</ul>

<div with content of thumbnail 1></div>
<div with content of thumbnail 2></div>
<div with content of thumbnail 3></div>
<div with content of thumbnail 4></div>
<div with content of thumbnail 5></div>

<ul class="stage">
<li more thumbnails></li>
<li more thumbnails></li>
<li more thumbnails></li>
<li more thumbnails></li>
<li more thumbnails></li>
</ul>

<div with content of thumbnail 6></div>
<div with content of thumbnail 7></div>
<div with content of thumbnail 8></div>
<div with content of thumbnail 9></div>
<div with content of thumbnail 10></div>
</div>

因此，我有两行缩略图，它们下面有Div框，在单击时显示缩略图的内容。现在，当我单击顶部的一个类别时，我想对两个ul中的所有缩略图进行排序。这有可能吗

我希望你明白我的意思。。。如果你需要更多信息，尽管问吧

---

你好

向div添加一个与a data rel同名的属性以连接它们

看

---

尝试将特定类作为标记或键添加到每个元素中，并在选择筛选器时隐藏具有该特定标记/键的所有元素。我已修复了您答案中的格式，但我不能100%确定它是否真的回答了问题。

jQuery('.portfolio-filter li a').on('click', function(event){
    var dataRel = jQuery(this).attr('data-rel');
    if (dataRel == 'all') {
        jQuery('div').slideDown();
    } else {
        jQuery('div[data-rel="'+dataRel+'"]').slideUp();
    }
});

<ul id="example2">
<li><a data-rel="all" class="folio-btn active" href="#all">Alle</a></li>
<li><a data-rel="print" class="folio-btn" href="#print">Print</a></li>
<li><a data-rel="web" id="web" class="folio-btn" href="#web">Web</a></li>
<li><a data-rel="flash" id="flash" class="folio-btn" href="#flash">Flash</a></li>
<li><a data-rel="3d" id="3d" class="folio-btn" href="#3d">3D</a></li>
<li><a data-rel="grafik" id="grafik" class="folio-btn" href="#grafik">Grafik</a></li>
</ul>