#javascript #jquery #filter #categories
#javascript #jquery #Фильтр #Категории
Вопрос:
HTML:
<div class="filter">
<a href="#category-1">category 1</a>
<a href="#category-2">category 2</a>
</div>
<ul class="items">
<li class="category-1">item 1</li>
<li class="category-1">item 2</li>
<li class="category-2">item 3</li>
<li class="category-2">item 4</li>
</ul>
Чего я хочу, так это, например, чтобы нажатие на ссылку «категория 1» скрывало все остальные элементы категории из списка.
Я понимаю, что можно использовать селектор jQuery .filter(), но я не уверен, как его реализовать для моих целей здесь.
Спасибо за вашу помощь!
Ответ №1:
$('div.filter').delegate('a', 'click', function (event) {
$('ul.items li').hide().filter('.' this.href.slice(this.href.indexOf("#") 1)).show();
event.preventDefault();
});
Комментарии:
1. Отлично, спасибо! Кстати, почему делегирование вместо более простого .click(функция(), просто любопытно? 🙂
2. Я нахожу это более чистым, чем добавление события к каждому тегу привязки.
Ответ №2:
В основном вы будете делать что-то вроде этого: $('.items li').hide(); $('.category-1').show();
Первый, чтобы скрыть все остальные пункты меню, второй, чтобы показать выбранные из них 🙂 Вы можете просто поместить это в onclick
из <a>
тега.