2012-08-03 78 views
1

我正在使用同位素過濾器爲項目排序模板列表。用戶可以根據列寬(2列,3列,4列)或類型(文本,圖片,視頻)等選項進行過濾。有更多的選擇,但這使得這個例子更簡單。jQuery同位素插件添加劑過濾器

過濾器現在的工作方式是該項必須匹配所有過濾器選項。我希望能夠篩選符合一個或多個篩選選項的項目。

第二個問題:是否有任何功能允許在步驟中進行過濾?例如,如果我可以顯示所有2或3列的模板,然後將這些結果過濾到文本和視頻模板。

我認爲這可能超出了插件的範圍,我可能必須編寫自己的過濾器,找到不同的插件(至少用於過濾)或更改向用戶呈現過濾的方式。

回答

2

我假設你有不同的類用於過濾,類似col2,col3,col4和文本,圖像,視頻,目前正在沿着'.col2.image'的線建立一個過濾器字符串,它可以讓你看到橫跨兩列並且是圖像的每一個元素。通過用逗號分隔它們,你會得到一個OR過濾器('.col2,.image'),它顯示任何圖像或跨越兩列。

首先,您現在可以結合第二部分創建一個像'.col2.text,.col2.video,.col3.text,.col3.video'這樣的過濾器,但是,這可能會變得很難看,尤其是當你增加類別的數量時。

爲了簡化,我修改了Isotope來接受一個過濾器數組,並將它們與多個過濾器調用鏈接在一起,但是,它聽起來像也可以傳入更復雜的過濾對象而不是字符串(https ://github.com/desandro/isotope/issues/144#issuecomment-4595552),它不需要修改同位素的來源。對於上面的示例中,這可以類似於:

$('.element').filter('.col2, col3').filter('.text, .video') 

比產生的可能的組合的字符串顯著簡單。

.filter(http://api.jquery.com/filter/)上的文檔提供了有關高級篩選的更多信息。

+0

謝謝,關於逗號分隔的一部分,您可以輕鬆地爲各種組合過濾正是我一直在尋找。我已經構建了一個字符串過濾器來傳遞,所以修改它並不會那麼困難。如果我有代表,我會投你一票。再次感謝。 – 2012-08-03 19:30:55

+0

確保你刪除了最後的','如果你正在構造字符串,否則你會得到一個錯誤。 – 2017-01-09 12:11:24

1
+0

感謝此代碼。就像我上面所說的,如果我有代表,我會樂意爲你提供幫助。 – 2012-08-03 19:32:54

+0

沒問題。幫助是爲了幫助 - upvotes是爲bean計數器:) – Systembolaget 2012-08-03 21:49:31