Селекторы jQuery, обобщающие селектор по идентификатору якоря

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, которые кажутся ужасно неэффективными ( - ужасно неэффективны). Я понятия не имею, как обобщить код, чтобы он брал идентификатор (или, возможно, класс) якоря, а затем применял его к соответствующим спискам. Любая помощь, пожалуйста?

Спасибо!

---

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

Вы можете использовать $(".class").click вместо $("#showcategory1").click для триггера, использовать идентификатор, чтобы выбрать конкретную статью, и использовать .siblings.hide(), чтобы скрыть все остальные статьи.

Answer 3

Попробуйте это (не проверено, но должно дать вам представление):

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

Answer 4

Функции-обработчики для событий передаются объекту события (и элемент, вызвавший событие, также передается как this). Вы можете использовать это, чтобы получить идентификатор, а затем работать оттуда - при необходимости, используя функции обхода DOM в библиотеке jQuery, чтобы перейти к нужному списку.