Javascript 过滤组合JQuery

我尝试使用JQuery创建简单的可过滤投资组合，但没有得到令人满意的结果。 我认为最好的学习方法是创建真正的应用程序。

这里是我的代码：

$（文档）.ready（函数（）{
$（'.filter container.filter button'）。单击（函数（e）{
e、 预防默认值（）；
$（this.addClass（'active'）.sides（）.removeClass（'active'）；
$（'.portfolio'）.find（'.portfolio嵌套[data filter='+$（this.data（'filter'）+']）.fadeIn（）；
});
})

.portfolio{
宽度：100%；
填充：20px0；
背景色：#00f676；
文本对齐：居中；
字体系列：塔荷马州Raleway；
}
.投资组合ul，
李先生{
列表样式：无；
保证金：0；
填充：0；
}
.投资组合ul{
边缘底部：20px；
}
.portfolio.filter容器li{
显示：内联块；
右边距：20px；
垫底：10px；
边框底部：2倍纯色透明；
-moz转换：所有.6秒都易于输入输出；
-o型过渡：所有.6s易于输入输出；
-webkit过渡：所有.6s易于输入输出；
过渡：所有.6s易于输入输出；
光标：指针；
}
.portfolio.filter容器li:最后一个孩子{
右边距：0；
}
.portfolio.filter容器li.active，
.portfolio.filter容器li:悬停{
边框底部：2个实心#ffffff；
}
.portfolio.portfolio嵌套{
宽度：100%；
高度：200px；
利润率：0.20px；
背景色：#e1e1；
}

所有
设计
Grahpic
编程

你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界

您的代码运行正常，只是忘记隐藏额外的元素。请尝试以下操作：

$(document).ready(function() {
  $('.filter-container .filter-button').click(function(e) {
    e.preventDefault();

    $(this).addClass('active').siblings().removeClass('active');
    $(".portfolio-nested").hide();
    $('.portfolio').find('.portfolio-nested[data-filter=' + $(this).data('filter') + ']').fadeIn();
  });
});

注意行

$（“.portfolio nested”）.hide（）。这将首先隐藏所有元素，然后下一行仅显示与过滤器匹配的元素

PS：您还需要处理筛选器类型All。
用于All的筛选器很简单。我实现了它，让类“all”列出项目。
然后我插入了一个if语句
if（$（this）.hasClass（“all））
以显示所有
项目。
请描述问题。您写道您得到了一个不满意的结果，但您没有指定这个结果是什么以及如何不满意。代码不工作您没有定义工作良好的状态。什么是好的？我需要什么使可过滤工作！！您所有的
的数据筛选值相同。这就是问题所在吗？非常感谢，我现在就试试。因此，如何获得像这样的项目：@MichaelNeas这更像是CSS的事情，超出了这个问题的范围。建议你就此问另一个问题。如果我提出新问题，我将获得反对票，请帮助我