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

Hide all items untill filter is selected jQuery isotope

本文关键字：选择 过滤器 jQuery 同位素 项目 隐藏所      更新时间：2023-09-26

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

例如

我有过滤器:

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>
相关文章：