Javascript 隐藏所有项目，直到选中过滤器jQuery_Javascript_Jquery_Jquery Isotope

Javascript 隐藏所有项目，直到选中过滤器jQuery

javascript jquery

Javascript 隐藏所有项目，直到选中过滤器jQuery,javascript,jquery,jquery-isotope,Javascript,Jquery,Jquery Isotope,我想隐藏所有项目，直到选择过滤器。我无法从文档中找出是否有此选项以及如何配置它比如说我有过滤器： Shirts | Pants | Shoes (filters) ---------------------- (grid with items that need to be filtered) Item 1 | Item 2 | Item 3 ... | ... | ... ... | ... | ... ... | ... | ... --------

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

比如说我有过滤器：

Shirts | Pants | Shoes (filters)

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

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

谢谢

我正在使用jQuery同位素插件来实现这一点。

类似的东西应该可以工作

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

在这里拉小提琴：

来自：

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

$（'#容器'）。同位素（{过滤器：'.metal'}）

我隐藏所有项目的第一个想法是将

filter

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

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

是JSFIDLE

@RizkySyaiful的评论：

此外，如果您将这段代码作为代码片段（由同位素的创建者制作），只需更改这一行即可

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

到

不是很专业，但很管用。 仅限Javascript。


var col_1_items=新数组（“Alex”、“Mark”、“John”）
函数编辑表（）{
var rows=col_1_items.length；//或类似的1,2,3。。
var cols=1；//每个列都应该有它的项数组！
var myTable=document.getElementById（'myTable'）；
//删除旧行
对于（var i=myTable.rows.length-2；i>-1；i--）
{
myTable.deleteRow（i）；
}
对于（r=0；r

为什么不使用PHP和MySQL？简单：在数据库中获得一个表，通过查询过滤任何您喜欢的内容。我知道您需要jQuery的特定帮助，但是如果您在SQL数据库上复制表并通过PHP打印它们，您肯定会节省时间并减少困难。希望这至少有点帮助，因为没有人回答，再见！当然，在jQuery和javascript中有一种方法，您可以尝试将所有项目保存到数组中，然后过滤该数组，并通过打印机功能打印所需内容。如果你想让我这么做，我可以写下整个脚本。@FoxNos它应该是动画的，我正在另一个joomla组件上工作，没有时间自己写这些东西。好吧，在这种情况下，你可以使用AJAX、PHP和MySQL。。无论如何，我将尝试提供一些代码。

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

<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>