將數據過濾器應用於

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-> View All並嘗試就緒-> 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

如果您只想使用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

我趕緊寫了這件事 ，也許它會幫助你。

想法是您使用:not CSS選擇器

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

然后只需在包裝器上切換類