過濾jQuery的分裂列表

Question

看到：http://jasondaydesign.com/index2.html

我使用easylistsplitter.js佈局投資組合項目。不幸的是，我的過濾器不適用於所有的項目。它僅過濾第一列。

想法？

謝謝！

Answer 1

我不太明白你是如何試圖使用listsplitter與磚石插件一起...

磚石插件設置佈局和拆分佈局成你想要怎麼過多少列。如果您查看佈局頁面，砌體將佈局分爲4列：#primary.listCol1，.listCol2,.listCol3和.listCol4.last。因此，之後應用列表分割不起作用，因爲列表已被分割。

如果您嘗試對列表進行排序，您可以查看tinysort插件，或者如果您只是想要一個很好的短腳本，則需要對this answer中的一個稍作修改。

---

更新：我正在查看可篩選的腳本，但我找不到一個很好的簡單解決方案。但我確實發現this filterable tutorial這似乎更容易理解（對我來說）。我修改了它稍微使動畫與您的過濾腳本，這是結果：

$(document).ready(function() { 
    $('ul#portfolio-filter a').click(function() { 
    $(this).css('outline','none'); 
    $('ul#portfolio-filter .current').removeClass('current'); 
    $(this).parent().addClass('current'); 

    var filterVal = $(this).text().toLowerCase().replace(' ','-'); 

    if(filterVal == 'all') { 
     $('.portfolio li.hidden').animate({ width: 'show', opacity: 'show' }, 1000).removeClass('hidden'); 
    } else { 
     $('.portfolio li').each(function() { 
     if(!$(this).hasClass(filterVal)) { 
      $(this).animate({ width: 'hide', opacity: 'hide' }, 1000).addClass('hidden'); 
     } else { 
      $(this).animate({ width: 'show', opacity: 'show' }, 1000).removeClass('hidden'); 
     } 
     }); 
    } 
    return false; 
    }); 
}); 

你不應該改變任何東西，除了上述取代「jquery.filterablepack.js」內容碼。