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，但是当页面加载时，如果类别中有任何内容，它将会只显示每一个项目，我希望它不要那样做。

所以我删除了第一个Li - ＆gt;查看全部并尝试准备好了 - ＆gt;单击（）;

但它并没有像我想象的那样奏效我有什么选择？

（这是我的第二个进展方法准备好隐藏所有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

如果你想要一个只有jQuery的解决方案让我知道，你可以使用isotope。

另外，你的第二种方法很好'隐藏所有div准备就绪。拉取div attr进行数据过滤，然后用数据过滤器字段的类取消隐藏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;
}

然后只需在包装器上切换类

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

2 个答案: