Question

我想隐藏所有项目，直到选择过滤器。我无法从文档中找出是否有选项以及如何配置它。

例如我有过滤器：

Shirts | Pants | Shoes (filters)

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

在选择第一个过滤器之前，如何隐藏所有项目？

谢谢！

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

Answer 1

来自docs：

要仅显示.metal项目，jQuery脚本将为：

$（＆＃39;＃container＆＃39;）。同位素（{filter：＆＃39; .metal＆＃39;}）;

我首先要隐藏所有项目的想法是将filter选项设置为空字符串，但它不起作用。但是，如果将其设置为某个不存在的类，则将隐藏所有项目：

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

Here是jsfiddle。

@RizkySyaiful的评论：

此外，如果您这是一个代码段http://codepen.io/desandro/pen/JGKyrY（由Isotope的创建者制作），您只需更改此行

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

到

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

Answer 2

这样的事情应该有效

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

小提琴：

http://jsfiddle.net/z6ngr/

Answer 3

不是很专业，但有效。 仅限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>

隐藏所有项目，直到选择过滤器为jQuery同位素

3 个答案: