Question

我的网站上有一些代码显示博客上的文章列表如下（将有多个具有相同类别的对象）：

<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（或可能是类），然后将其应用于相关列表。有什么帮助吗？

谢谢！

Answer 1

您可以通过以下类别列表来实现代码的共同化：

$("#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选择器不必是文字字符串，它们可以用文字和变量构造。

Answer 2

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

Answer 3

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

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

Answer 4

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

jQuery选择器，通过锚ID推广选择器

4 个答案: