jQuery检查列表项中的文本是否对应于div的类 [英] jQuery check if text in list item corresponds to class of a div

问题描述

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

I have a dynamically created list of categories as currently follows

<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"的文章.

I also have several dynamically created articles in the same page, these have classes that are assigned to them by wordpress, for example, one article may have the class category-cat-1, whilst another may have category-cat-2 and so on. When I click on the List Item with text "Cat 1" I want to fade out the article with class "category-cat-1".

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

Unfortunately I have no idea how to start this so would appreciate someone to point me in the right direction, then I can refine my question.

推荐答案

这是一种实现方法.希望您可以将此演示应用到您的代码中.

Here is one way you can do it. Hopefully you can apply this demonstration to your code.

$('.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.

If you would rather have articles hide/show after each click.

此外，如果您需要用-

改为使用liClass = liClass.replace(/ /g,'-');.

这篇关于jQuery检查列表项中的文本是否对应于div的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！