类别/标签选择器答案

【问题标题】：Category/Tag Selectors类别/标签选择器
【发布时间】：2012-12-21 09:41:59
【问题描述】：

尝试将投资组合库添加到我正在制作的自定义 wp 主题中。我已经筋疲力尽地尝试寻找甚至可以修改的解决方案和插件。我认为我在寻找解决方案时遇到的一个问题是，我不完全确定哪些搜索词可以帮助我找到与我想要实现的目标相似的东西。

截至目前，我的导航有以下 div

<div id="tags" role="navigation">
<p>
<a class="portrait" href="#portrait">Portrait</a> / 
<a class="landscape" href="#landscape">Landscape</a> / 
<a class="sports" href="#sports">Sports</a> / 
<a class="nature" href="#nature">Nature</a> / 
<a class="weddings" href="#weddings">Weddings</a> / 
<a class="active" href="#">All</a>
</p>
</div>

在我的导航下方是我的图像 div。我想做的是能够从图像导航中选择一个类别，并且只显示那些特别标记的图像。我不想要的是为该标签/选择打开一个新页面。我想让所选导航的图像重新组织或淡入/淡出。

我确定那里有一个与我正在寻找的类似的脚本或插件。或者就如何最好地实现这一目标提供一些指导/建议。

提前致谢。

【问题讨论】：

标签： javascript jquery wordpress css

【解决方案1】：

Quicksand jquery 插件将为您做到这一点：

http://razorjack.net/quicksand/

同位素插件：

http://isotope.metafizzy.co/

或者使用一些css3：

http://tympanus.net/Tutorials/CSS3FilterFunctionality/

【讨论】：

【解决方案2】：

假设你有一个 ID 为 'tagImages' 的 div，给每个图像一个与锚类同名的数据属性，这段代码应该可以工作。

预期的 HTML

<div id="tagImages">
    <img src="/location/image.jpg" data-category="portrait" />
    <img src="/location/image.jpg" data-category="nature" />
    <img src="/location/image.jpg" data-category="nature" />
    <img src="/location/image.jpg" data-category="weddings" />
</div>

jQuery 代码

$('#tags').on('click', 'a', function(e) {
    e.preventDefault();
    var cat = $(this).attr('class'),
        $tagImg = $('#tagImages').find('img');
    $tagImg.hide();
    if (cat === 'active') {
        $tagImg.show();
    } else {
        $tagImg.each(function() {
            if ($(this).data('category') == cat) {
                $(this).show();
            }
        });
    }
});

这是一个 jsFiddle Example，它展示了您的要求。

【讨论】：