JQuery селекторы, обобщая селектор на якорь ID

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

Спасибо!

---

Answer 1

Вы можете commonalize код, работая из списка категорий:

$("#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

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

Answer 3

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

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

Answer 4

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