隱藏所有項目，直到過濾器被選中jQuery同位素

我想隱藏所有項目，直到選中過濾器。我無法從文檔中找出是否有選項以及如何配置它。隱藏所有項目，直到過濾器被選中jQuery同位素

例如我已過濾器：

Shirts | Pants | Shoes (filters) 

---------------------- (grid with items that need to be filtered) 
Item 1 | Item 2 | Item 3 
... | ... | ... 
... | ... | ... 
... | ... | ... 
----------------------

我怎樣才能讓，直到選擇第一過濾器的所有項目被隱藏？

謝謝！

我正在使用jQuery同位素插件。

來源

2014-03-25 Jinx

爲什麼不用PHP和MySQL去？簡單：在數據庫中找到一張表，用查詢過濾任何你喜歡的東西。我看到你需要特定的jQuery幫助，但是如果你在SQL數據庫上重現你的表並通過PHP打印它們，你肯定會節省時間並減少困難。希望這是至少有點幫助，因爲沒有人回答，再見！當然，在jQuery和JavaScript中有一種方法，您可以嘗試將所有項目保存到數組中，然後過濾這些數組並通過打印機功能打印您需要的內容。如果你要我這樣做，我可以寫下整個劇本。 –

@FoxNos它應該是動畫，並且我正在研究其他人的joomla組件，並沒有時間將自己的東西寫下來。 – Jinx

那麼，在這種情況下，你可以使用AJAX，PHP和MySQL ..我會嘗試提供一些代碼。 –

從docs：

要僅顯示。金屬物品，jQuery的腳本會：

$（'＃container'）。isotope（{filter：'.metal'}）;

我隱藏所有項目的第一個想法是將filter選項設置爲空字符串，但它不起作用。但是，如果你把它設置爲某個不存在的類，那麼所有的項目將被隱藏：

$('#container').isotope({ filter: '.dummy' });

Here是的jsfiddle。 @RizkySyaiful的

評論：

另外，如果你這個代碼段http://codepen.io/desandro/pen/JGKyrY（同位素的創造者製造），你可以只是簡單的改變這一行

// combine inclusive filters 
var filterValue = inclusives.length ? inclusives.join(', ') : '*';

到

// combine inclusive filters 
var filterValue = inclusives.length ? inclusives.join(', ') : '.dummy';

來源

2014-03-25 22:45:58 kol

像這樣的東西應該工作

$('.filter').click(function(){ 
    var type = $(this).attr('data-filter'); 
    $('article[data-type="'+type+'"]').show(); 
});

小提琴這裏：

http://jsfiddle.net/z6ngr/

來源

2014-03-25 22:40:21 rorymorris

不是很專業熱情，但工作。 僅限Javascript。

<html> 
<head> 
<script> 

var col_1_items = new Array("Alex","Mark","John") 


function editTable() { 
    var rows = col_1_items.length; //Or whatever like 1,2,3 .. 
    var cols = 1; //Each col should have its array of items ! 



    var myTable = document.getElementById('myTable'); 

    //delete old rows 

    for(var i = myTable.rows.length-2; i > -1; i--) 
    { 

    myTable.deleteRow(i); 
    } 

    for (r = 0; r < rows; r++) { 

     var row = myTable.insertRow(r); 
     for (c = 0; c < cols; c++) { 

      var cell = row.insertCell(c); 

      if (document.getElementById('filter').value == "All") { 
       cell.innerHTML = col_1_items[r] 
      } 
      else { 
       var indexOfFilterInArray = col_1_items.indexOf(document.getElementById('filter').value) 
       cell.innerHTML = col_1_items[indexOfFilterInArray]; 
       myTable = null //Break the parent cycle that otherwise would go on adding rows. 
       break; 

      } 


     } 
    } 
} 


</script> 
</head> 
<body> 

<table id="myTable" rules="all" border="1"> 
<tr><td colspan="2"> Filter<select id='filter'> 
<option value="All">All</option> 
<option value="Alex">Alex</option> 
</select> 
<button onclick="editTable()">Go</button> 
</td></tr> 

</table> 
</body> 
</html>

來源

2014-03-25 23:05:21

隱藏所有項目，直到過濾器被選中jQuery同位素

回答

相關問題