Используйте nav, чтобы показать / скрыть строки таблицы, используя jQuery

Question

Я пытаюсь использовать боковую навигацию для отображения строк таблицы по категориям с помощью jQuery.

<ul class="side-nav">
<li class="head">categories</li>
    <li><a class="item" href="#">Show all</a></li>
<li><a class="accessories" href="#">Accessories</a></li>
<li><a class="books" href="#">Books</a></li>
<li><a class="electronics" href="#">Electronics</a></li>
<li><a class="dvd" href="#">Dvd</a></li>
<li><a class="misc" href="#">Misc.</a></li>
</ul>

<table>
<tr class="item misc.">
<td>1964 Jaguar model car</td>
<td>Misc.</td>
</tr>
<tr class="item dvd">
<td>Up(Pixar)</td>
<td>Dvd</td>
</tr>
<tr class="item electronics">
<td>Apple iMac</td>
<td>Electronics</td>
</tr>
</table>

В настоящее время я использую что-то вроде этого и просто повторяю это для каждой категории, но эти категории в конечном итоге будут добавлены динамически, и это не приведет к сокращению. Я знаю, что должен быть более легкий путь. Спасибо за помощь.

$('a.electronics').click(function() {
$('tr.item').hide();
$('tr.electronics').fadeIn();
});

$('a.item').click(function() {
$('tr.item').fadeIn();
});

Answer 1

Вам нужно каким-то образом сохранить связь между гиперссылкой и строкой таблицы. Вы можете сделать это:

1) Связывание каждого из них по отдельности: это в основном означает, что ваш сценарий записывает что-то, что связывает их, подобно тому, что вы сейчас только что сгенерировали любым кодом, создаваемым вашей таблицей. Возможно, вы захотите переместить функциональность в одну функцию, которую вы будете вызывать, а не записывать ее вместе с каждой, но каждую из них необходимо связать отдельно.

2) Использование некоторого атрибута гиперссылки. В своем примере вы в основном использовали класс CSS, чтобы можно было что-то вроде:

$('.sidenav a').click(function() {
   $('tr.item').hide();
   $('tr.' + $(this).attr('class')).fadeIn();
});

Но если вы добавите другой класс к вашему a, то это сломается. Вы также можете использовать другой атрибут для этого сопоставления или некоторую связь между идентификаторами (например, A - это «#electronics», а tr - «#electronicsrow», а затем на втором вы просто наберете $('#'+$(this).attr('id')+'row')), поэтому что это не мешает тому, что вы можете сделать со своей способностью добавлять классы CSS к нему. Вы также можете создать свой собственный поддельный атрибут, чтобы хранить сопоставление, но оно не будет проверено.

Answer 2

Вот, пожалуйста:

$(function()
{
    $('ul.side-nav a').click(function()
    {
       $('tr.item').hide();
       $('tr.' + $(this).attr('class')).fadeIn();       
    });
});

Рабочий пример: http://jsbin.com/eratu3