僅限於數據過濾器=「*」的Isotpe過濾器，其他每個過濾器都隱藏一切

Question

我的同位素過濾器僅適用於應顯示所有容器的過濾器鏈接，當單擊其他每個過濾器時，所有容器都被隱藏。

這裏是工作fiddle

這裏是代碼：

HTML

<div class="isotope-nav"> 
    <ul class="isotope-filters"> 
     <li><a class="#" data-filter="*">All posts</a> 
     </li>   
     <li><a class="novo isotope-link" href="#" data-filter="novo">Novo</a> 
     </li> 
     <li><a class="uncategorized isotope-link" href="#" data-filter="uncategorized">Uncategorized</a> 
     </li> 
     <li><a class="vesti isotope-link" href="#" data-filter="vesti">Vesti</a> 
     </li> 
    </ul> 
</div> 
<!-- end .isotope-nav --> 
<div class="isotope-container"> 
    <div class="col-lg-3 post-container uncategorized "> 
     <div class="post-header"> 
       <a href="#" class="isotope-link uncategorized">Uncategorized</a> 
     </div> 
     <!-- end .post-header --> 

    </div> 
    <!-- end .post-container --> 
    <div class="col-lg-3 post-container uncategorized "> 
     <div class="post-header">  
      <a href="#" class="isotope-link uncategorized">Uncategorized</a> 
     </div> 
     <!-- end .post-header --> 

    </div> 
    <!-- end .post-container --> 
    <div class="col-lg-3 post-container novo novo vesti "> 
     <div class="post-header"> 
       <a href="#" class="isotope-link novo">Novo</a> <a href="#" class="isotope-link vesti">Vesti</a> 
     </div> 
     <!-- end .post-header --> 
    </div> 
    <!-- end .post-container --> 
    <div class="col-lg-3 post-container novo novo vesti "> 
     <div class="post-header"> 
     <a href="#" class="isotope-link novo">Novo</a> <a href="#" class="isotope-link vesti">Vesti</a> 
     </div> 
     <!-- end .post-header --> 
    </div> 
    <!-- end .post-container --> 
    <div class="col-lg-3 post-container vesti "> 
     <div class="post-header"> <a href="#" class="isotope-link vesti">Vesti</a> 
     </div> 
    <!-- end .post-header --> 
    </div> 
    <!-- end .post-container --> 
    <div class="col-lg-3 post-container novo novo vesti "> 
     <div class="post-header"> 
      <a href="#" class="isotope-link novo">Novo</a> <a href="#" class="isotope-link vesti">Vesti</a> 
     </div> 
     <!-- end .post-header --> 
    </div> 
    <!-- end .post-container --> 
    <div class="col-lg-3 post-container novo novo vesti "> 
     <div class="post-header"> 
      <a href="#" class="isotope-link novo">Novo</a> <a href="#" class="isotope-link vesti">Vesti</a> 
     </div> 
     <!-- end .post-header --> 
    </div> 
      <!-- end .post-container --> 
    <div class="col-lg-3 post-container novo novo vesti "> 
     <div class="post-header"> 
      <a href="#" class="isotope-link novo">Novo</a> <a href="#" class="isotope-link vesti">Vesti</a> 
     </div> 
     <!-- end .post-header --> 
    </div> 
      <!-- end .post-container --> 
    <div class="col-lg-3 post-container novo novo vesti "> 
     <div class="post-header"> 
      <a href="#" class="isotope-link novo">Novo</a> <a href="#" class="isotope-link vesti">Vesti</a> 
     </div> 
     <!-- end .post-header --> 

    </div> 
    <!-- end .post-container --> 
    <div class="col-lg-3 post-container novo novo vesti "> 
     <div class="post-header"> 
      <a href="#" class="isotope-link novo">Novo</a> <a href="#" class="isotope-link vesti">Vesti</a> 
     </div> 
      <!-- end .post-header --> 
    </div> 
    <!-- end .post-container --> 
</div> 
<!-- end .isotope-container --> 

JS

jQuery(document).ready(function($){ 
//isotope 
$container = $('.isotope-container'); 
$container.isotope({ 
    itemSelector : '.post-container', 
    layoutMode : 'masonry' 
}); 

$('.isotope-filters li a').click(function(){ 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ filter: selector }); 
    return false; 
}); 
}); 

CSS

/**** Isotope filtering ****/ 
.isotope-item { 
    z-index: 2; 
} 
.isotope-hidden.isotope-item { 
    pointer-events: none; 
    z-index: 1; 
} 

Answer 1

您需要使用選擇語法，即指定類名：在你的data-filter屬性.novo，但你忘了.和剛novo。其他人也一樣。

更改data-filter值.novo，.uncategorized和.vesti這樣的：

<div class="isotope-nav"> 
    <ul class="isotope-filters"> 
     <li><a class="#" data-filter="*">All posts</a> 
     </li>   
     <li><a class="novo isotope-link" href="#" data-filter=".novo">Novo</a> 
     </li> 
     <li><a class="uncategorized isotope-link" href="#" data-filter=".uncategorized">Uncategorized</a> 
     </li> 
     <li><a class="vesti isotope-link" href="#" data-filter=".vesti">Vesti</a> 
     </li> 
    </ul> 
</div> 

---

DEMO - 更新data-filter值

---