jquery - jQuery检查列表项中的文本是否对应于div的类

我有一个动态创建的类别列表，如下所示

<ul class="filter_categories">
<li> Cat 1 </li>
<li> Cat 2 </li>
<li> Cat 3 </li>
<li> Cat 4 </li>
</ul>

我在同一页面中也有几篇动态创建的文章，这些文章具有通过wordpress分配给它们的类，例如，一篇文章可能具有category-cat-1类，而另一篇文章可能具有category-cat-2等。当我单击文本为“ Cat 1”的列表项时，我要淡出类别为“ category-cat-1”的文章。

不幸的是，我不知道该如何开始，所以希望有人指出我正确的方向，然后我才能完善我的问题。

最佳答案

这是您可以做到的一种方法。希望您可以将此演示应用于您的代码。

$('.filter_categories li').click(function(){
        var liClass = $(this).html().toLowerCase().trim();
        liClass = liClass.replace(' ','-');
        $('.category-'+liClass).fadeOut();
});

http://jsfiddle.net/trevordowdle/8U3hL/

你可以加

$('.category-'+liClass).stop().fadeToggle();

如果您希望在每次单击后隐藏/显示articles。

另外，如果您需要用1替换更多的-空间

使用liClass = liClass.replace(/ /g,'-');代替。