2015-10-19 63 views
0

在我的mixitup中,我正在做一個基本的過濾器,但是當我點擊其中一個過濾器按鈕時,過濾後的項目出現並在一秒鐘後消失。我可以看到螢火蟲,它增加了「失敗」類到這些物品的容器。但我看不出什麼樣的錯誤。Mixitup過濾器消失,並添加「失敗」類

在codepen:http://codepen.io/anon/pen/PPOgwr

這裏是我的過濾器按鈕HTML:

<div class="row row-centered filter-section"> 
      <div class="col-md-7 col-centered"> 
       <ul class="filter"> 
       <li><a href="#" data-filter="all">Hepsi</a></li> 
       <li><a href="#">/</a></li> 
       <li><a href="#" class="filter" data-filter=".basili">Basılı İş</a></li> 
       <li><a href="#">/</a></li> 
       <li><a href="#" class="filter" data-filter=".kurumsal">Kurumsal Kimlik</a></li> 
       <li><a href="#">/</a></li> 
       <li><a href="#" class="filter" data-filter=".ilan">İlan</a></li> 
       <li><a href="#">/</a></li> 
       <li><a href="#" class="filter" data-filter=".ambalaj">Ambalaj</a></li> 
       <li><a href="#">/</a></li> 
       <li><a href="#" class="filter" data-filter=".stand">Stand</a></li> 
       <li><a href="#">/</a></li> 
       <li><a href="#" class="filter" data-filter=".film">Film</a></li> 
       </ul> 
      </div> 
     </div> 

這裏是容器:

<div class="row grid" id="grid"> 
      <div class="col-md-3 col-sm-6 margin-bottom-30 mix basili"> 
      <div class="position-relative"> 
       <a href="" id="silver1"> 
       <img class="img-responsive" src="isler/silver/silver1.jpg" alt="portfolio"> 
       <div class="overlay"> 
        <div class="portfolio-title text-center"> 
        <h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4> 

        </div> 
       </div> <!-- /overlay --> 
       </a> 
      </div> 
      </div> 

      <div class="col-md-3 col-sm-6 margin-bottom-30 mix basili"> 
      <div class="position-relative"> 
       <a href="" id="silver2"> 
       <img class="img-responsive" src="isler/silver/silver3.jpg" alt="portfolio"> 
       <div class="overlay"> 
        <div class="portfolio-title text-center"> 
        <h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4> 

        </div> 
       </div> <!-- /overlay --> 
       </a> 
      </div> 
      </div> 
      <div class="col-md-3 col-sm-6 margin-bottom-30 mix ilan"> 
      <div class="position-relative"> 
       <a href="" id="silver3"> 
       <img class="img-responsive" src="isler/silver/silver4.jpg" alt="portfolio"> 
       <div class="overlay"> 
        <div class="portfolio-title text-center"> 
        <h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4> 

        </div> 
       </div> <!-- /overlay --> 
       </a> 
      </div> 
      </div> 
     </div> 

JS代碼:

$('#grid').mixItUp(); 

    $('.filter-section').on('click', 'a.filter', function() { 
    var filterValue = $(this).attr('data-filter'); 
    $('#grid').mixItUp('filter', filterValue, false); 
    $('#grid').on('mixFail', function(e, state){ 
     console.log(state); 
    }); 
    }); 

我需要你的幫助

回答

1

這可能有點晚了,給你這個答案,但我遇到了類似的問題,併爲我設法整理你的,太部分。

爲了簡化它,您的問題是您在<ul>以及<li>標籤上應用了「過濾器」類。在您提供的CodePen中從<ul>中刪除課程可以解決問題 - 儘管彌補了您的佈局。

希望這會有所幫助。