Question

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

这些缩略图在列表中（ul，li），下面有一些Divs，其中包含这5个缩略图的内容。然后在列表中再次显示一些缩略图，并再次使用这些缩略图的内容划分。

我的代码如下：

过滤类别//导航

<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框，显示点击时缩略图的内容。现在，当我点击顶部的一个类别时，我想要对两个缩略图中的所有缩略图进行排序。这有可能吗？

我希望你明白我的意思......如果你需要更多信息，请问！

问候！

Answer 1

使用与a data-rel相同的名称为div添加属性以连接它们。

请参阅JSfiddle

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();
    }
});

Answer 2

<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>

两个分区的可过滤投资组合

2 个答案: