jQuery选择，要概括通过锚ID选择

我有我的网站上一些代码，显示在博客的文章列表如下（会有具有相同类型的多个对象）：jQuery选择，要概括通过锚ID选择

<ul class="article category1"> 
    <li> etc 
    <li> 
</ul> 
<ul class="article category2"> 
    <li> etc 
    <li> 
</ul> 
<ul class="article category3"> 
    <li> etc 
    <li> 
</ul>

我有，所以你只有如下得到一个类别显示的过滤列表中的一些jQuery代码：

$("#showall").click(function() { 
    $("ul.article").show('fast'); 
}); 
$("#showcategory1").click(function() { 
    $("ul.article.category1").show('fast'); 
    $("ul.article").not("ul.category1").hide('fast'); 
});

当你点击相关链接，即

<a id="showall">All</a> 
<a id="category1">Category 1</a>

目前我有大约9类处理，所以10个片段的jQuery看起来非常低效（它是可怕的低效率）。我不知道如何推广代码，以便它获取锚的ID（或者类），然后将其应用于相关列表。请帮忙吗？

谢谢！事件

来源

2010-07-19 Josh

您可以通过从类别列表工作通用化代码：

$("#showall").click(function() { 
    $("ul.article").show('fast'); 
}); 

var cats = "food cars books"; 
$.each(cats.split(" "), 
    function(cat) { 
     $("#show"+cat).click(function() { 
      $("ul.article."+cat).show('fast'); 
      $("ul.article").not("ul."+cat).hide('fast'); 
     }); 
    });

这不会改变运行时行为，只是减少了首先创建函数所需的代码量。这里的关键思想是jQuery选择器不必是字面字符串，它们可以由文字和变量构成。

来源

2010-07-19 03:13:19

如果你使用'.siblings'，你可以链接最后两行到'$（“ul.article。”+ cat）.show（'fast'）。siblings（）。hide（'fast'）; ' – 2010-07-19 03:31:45

谢谢，这真棒:) 应该把.each（cats.split（“”），function（cat））改为.each（cats.split（“”），function（i，猫））来完成这项工作。 – Josh 2010-07-19 03:56:10

处理程序函数被传递的事件对象（以及触发事件的元件也被传递作为this）。您可以使用它来获取id，然后从那里操作 - 如果需要，可以使用jQuery库中的DOM遍历函数来找到正确的列表。

来源

2010-07-19 03:10:47 Amber

试试这个（未经测试，但应该给你一个想法）：

$("a[id^=category]").click(function() { 
    $("ul." + $(this).attr("id")).show("fast").siblings().hide("fast"); 
});

来源

2010-07-19 03:11:38

+1击败'.siblings'。 – 2010-07-19 03:16:14

他没有试图点击文章，有单独的链接控制显示哪些文章。 – 2010-07-19 03:16:33

您可以使用$(".class").click代替$("#showcategory1").click作为触发器，使用id选择特定文章并使用.siblings.hide()隐藏所有其他文章。

来源

2010-07-19 03:15:05

jQuery选择，要概括通过锚ID选择

回答

相关问题