jQuery的同位素過濾問題

我使用jQuery的同位素過濾Portofolio科jQuery的同位素過濾問題

我的過濾器

 <div id="filters" class="portfolioSection"> 
     <ul> 
      <li><a class="current" href="#" data-filter="*">All</a></li> 
      <li><a href="#" data-filter="category-1">Category 1</a></li> 
      <li><a href="#" data-filter="category-2">Category 2</a></li> 
      <li><a href="#" data-filter="category-3">Category 3</a></li> 
     </ul> 
     </div>

內容部分

<div class="portfolioContent"> 
      <ul class="row"> 
       <li class="portfolio element category-1 category-2"><img src="img/project1.png"> 
       <div class="projectName">Project Name</div> 
       <div class="projectCategory">Category 1</div> 
       </li> 
       <li class="portfolio element category-3"><img src="img/project2.png"> 
       <div class="projectName">Project Name</div> 
       <div class="projectCategory">Category 1</div> 
       </li> 
       <li class="portfolio element category-3"><img src="img/project3.png"> 
       <div class="projectName">Project Name</div> 
       <div class="projectCategory">Category 1</div> 
       </li> 
       <li class="portfolio element category-3"><img src="img/project4.png"> 
       <div class="projectName">Project Name</div> 
       <div class="projectCategory">Category 1</div> 
       </li> 
       <li class="portfolio element category-1 category-3"><img src="img/project5.png"> 
       <div class="projectName">Project Name</div> 
       <div class="projectCategory">Category 1</div> 
       </li> 
       <li class="portfolio element category-2"><img src="img/project6.png"> 
       <div class="projectName">Project Name</div> 
       <div class="projectCategory">Category 1</div> 
       </li> 
       <li class="portfolio element category-1 category-2"><img src="img/project7.png"> 
       <div class="projectName">Project Name</div> 
       <div class="projectCategory">Category 1</div> 
       </li> 
       <li class="portfolio element category-2"><img src="img/project8.png"> 
       <div class="projectName">Project Name</div> 
       <div class="projectCategory">Category 1</div> 
       </li> 
      </ul> 
      </div>

我的jQuery代碼：

var $container = $('.portfolioContent'); 
// initialize isotope 
$container.isotope({ 
    // options... 
    itemSelector : '.portfolio', 
    //layoutMode : 'fitRows' 
}); 

// filter items when filter link is clicked 
$('#filters a').click(function(){ 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ filter: selector }); 
    return false; 
});

當我點擊任何東西除了所有的內容都消失之外。而且平滑過渡的效果也不見了。

鏈接：http://play.mink7.com/sophiance/點擊查看部分

來源

2013-06-04 Harsha M V

你的語法不太正確：

<li><a href="#" data-filter="category-1">Category 1</a></li>

應該是：

<li><a href="#" data-filter=".category-1">Category 1</a></li>

通知.類名

之前， Isotope documentation

來源

2013-06-04 11:54:25 Turnip

omg：P非常感謝。我試過了。有用。任何想法abt過渡...更新鏈接 –

看起來在我的Chrome中工作正常。 – Turnip

你救了我的一天哥們！謝謝！ –

jQuery的同位素過濾問題

回答

相關問題