jQuery检查列表项中的文本是否对应于div的类
我有一个动态创建的类别列表，如下所示
- Cat 1
- Cat 2
- Cat 3
- Cat 4
我在同一页面上也有几个动态创建的文章，这些文章都有通过wordpress分配给它们的类，例如，一篇文章可能有class-cat-1，而另一篇文章可能有class-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,'-'); 代替。
你开始使用jQuery了。 这个问题有很多解决方案，我会带来第一个jsfiddle
jQuery(document).ready(function(){ jQuery('article').fadeOut('fast'); jQuery('.filter_categories li').click(function(){ var temp_object = jQuery(this); jQuery('article').fadeOut('fast',function(){ jQuery('article#article-'+temp_object.attr('data-href')).fadeIn('fast'); }) })
}）;
它应该为您提供一些有关它如何工作的基础知识。 你仍然需要得到if（）语句，例如，如果有人点击加快它将不会显示两个等等。但它显示了基础知识。 我建议使用data-href属性。 在这种情况下，当你有一些奇怪的类别名称（例如“，”）时，它不会失败。
我认为你考虑fadeIn除了fadeOut但是如果不是只是在我的示例代码中使用fadeOut更改fadeIn
希望这可以帮助。 如果这不是解释的话，请随意在评论中提出我会添加更多内容。
jQuery的
$('.filter_categories li').on('click', function() {//on li click var ht = $(this).text().trim().toLowerCase().replace(/ /g,'-');//get text/convert to LC/replace $('.category-'+ht).stop().fadeToggle();//toggle visibility of related articles });
做了一个小提琴： http ： //jsfiddle.net/filever10/9fDe2/
$(document).ready(function() { $('.filter_categories li').each(function(k, v) { $(this).click(function() { $('.category-cat-' + (k+1)).fadeOut(); }); }); });
在jQuery 1.7+中，你应该使用。 以下示例将事件绑定到.filter_categories元素，就像委托事件一样工作。
委托事件方法仅将事件处理程序附加到一个元素.filter_categories ，并且事件只需要冒出一个级别（从单击的li到.filter_categories ）。
方法1假设您可以使用顺序命名约定，例如在您的问题中：
$(".filter_categories").on("click", "li", function() { var articleClass = ".category-cat-" + ($(this).index() + 1); $(articleClass).fadeOut(); });
演示： http ： //jsfiddle.net/hadynz/yxjNb/1/
方法2假设您的不同文章名称和相应文章没有任何特定模式，您可以使用以下内容：
Science Article ... $(".filter_categories").on("click", "li a", function() { $("." + $(this).data('article')).fadeOut(); });
演示： http ： //jsfiddle.net/hadynz/yxjNb/2/