javascript - 同位素过滤器仅在数据过滤器 ="*"上进行过滤，其他过滤器隐藏所有内容

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值

<小时/>