我想隐藏所有项目,直到选择过滤器。我无法从文档中找出是否有这样的选项以及如何配置它。
例如我有过滤器:
Shirts | Pants | Shoes (filters)
---------------------- (grid with items that need to be filtered)
Item 1 | Item 2 | Item 3
... | ... | ...
... | ... | ...
... | ... | ...
----------------------
我如何使所有项目隐藏,直到第一个过滤器被选中?
谢谢!
我使用jQuery同位素插件
From the docs:
要只显示.metal项,jQuery脚本应该是:$("#容器")。同位素({过滤器:'。金属'});
我隐藏所有项目的第一个想法是将filter
选项设置为空字符串,但它不起作用。但是,如果将其设置为某个不存在的类,则所有项将被隐藏:
$('#container').isotope({ filter: '.dummy' });
这是文件。
@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';
像这样应该可以工作
$('.filter').click(function(){
var type = $(this).attr('data-filter');
$('article[data-type="'+type+'"]').show();
});
小提琴:http://jsfiddle.net/z6ngr/
不是很专业,但是可以。 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>