jQuery技术:jQuery检查列表项中的文本是否对应于div的类

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

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

你可以加

$('.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假设您的不同文章名称和相应文章没有任何特定模式，您可以使用以下内容：

 
 
Cat 1
 
Cat 2
 
Cat 3
 
Cat 4
 
 
 Science Article 
 ... $(".filter_categories").on("click", "li a", function() { $("." + $(this).data('article')).fadeOut(); }); 

演示： http ： //jsfiddle.net/hadynz/yxjNb/2/