在 <a> 上应用数据过滤器

Question

我正在使用展示展示，它根据类别对数据应用过滤器。

<nav id="portfolio-filter" class="span12">
<ul>
    <li class="active all">
        <a href="#" data-filter="*">View All</a>
    </li>
    <li class="other">
        <a href="#" data-filter=".cat1">Category 1</a>
    </li>
    <li class="other">
        <a href="#" data-filter=".cat2">Category 2</a>
    </li>
</ul>

以上是用于点击和应用数据过滤器的导航列表

它隐藏具有以下格式的div

<div class="portfolio-item cat1  v1 isotope-item" style="-webkit-transform: translate(0px, 0px);">
<div class="he-wrap tpl2">
    <img src="" alt="">
    <div class="shape2"></div>
    <div class="overlay he-view">
       <div class="bg a0">
            <div class="center-bar v1">
                <a href="#" class="link a0"></a>
                <p class="short_desc">short descript</p>
            </div>
        </div>    
    </div>
</div> 
<div class="project">
    <h6 class="helvetica"><a href="#">Title h6</a></h6>
    <span class="category">Category1</span>
</div>

这就是我想要做的。 有些类别页面将并且应该只显示其类别 仅 div，但当页面加载时，如果类别中有任何内容，它将 只显示每一个项目，我不希望它这样做。

所以我删除了第一个李 -> 查看全部 并尝试准备好 -> click();

但它并没有像我想象的那样工作 对此我有什么选择？

（这是我的第二个正在进行的方法 准备好隐藏所有div。 为数据过滤器拉取 div attr 然后用数据过滤字段的类取消隐藏div？）

任何输入/帮助或评论都会很棒。

-----更新

<script type="text/javascript">

           $("document").ready(function() {
                var $cat = $("#portfolio-filter ul li:first-child a").attr('data-filter');
                $(".isotope").isotope({ filter: ".cat1" });
                if ($cat !='*'){
                //$(".v1:not("+$cat+")").css("display","none");
                }
    });
    </script>

它只是不会应用正确的过滤器~当我添加过滤器时它总是不显示

Answer 1

您可以为此使用isotope，如果您想要一个仅限 jQuery 的解决方案，请告诉我。

另外，您的第二种方法很好'隐藏所有 div 准备就绪。拉取数据过滤器的 div 属性，然后取消隐藏具有数据过滤器字段类的 div。

不要忘记将它添加到您的脚本中，这应该基本上可以解决您的问题。

$('#portfolio-filter a').click(function(e){
       e.preventDefault();
        $('#portfolio-filter .current').removeClass('current');
        $(this).addClass('current');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    }); 
});

Answer 2

我wrote this up quickly，也许它会帮助你。

这个想法是你使用:not CSS 选择器

.showcat1 > .item:not(.cat1) {
    display: none;
}

然后在包装器上切换类