Нужна помощь в разделении val пользовательского атрибута данных
Я довольно новичок с JQuery / JS. Попытка построить пользовательскую функцию фильтра для рецептов, используя jQuery. Я могу заставить его работать, если я использую простые уникальные значения; например, 1, 2, 3 и т. д. Однако мне нужны специальные атрибуты данных для тегов И категорий; например, c1, t1, c2, t2, и так далее, и так далее...
В настоящее время мой атрибут читается как одно значение. Если это вообще возможно, используя код, который я написал до сих пор, что будет лучшим подходом для разделения значения? Это намного сложнее, чем обычные "улучшения пользовательского интерфейса", для которых я обычно использую jQuery. Фильтры:
Фильтры категории:
<li><a class="cat-link" href="#" data-category-id="c1">Soups & Chili</a></li>
<li><a class="cat-link" href="#" data-category-id="c2">Appetizers</a></li>
<li><a class="cat-link" href="#" data-category-id="c3">Salads & Sides</a></li>
Фильтры тегов:
<li><a class="cat-link" href="#" data-category-id="t2">Gluten Free</a></li>
<li><a class="cat-link" href="#" data-category-id="t3">Vegan</a></li>
<li><a class="cat-link" href="#" data-category-id="t4">Vegetarian</a></li>
Рецепты:
<li><a class="cat-link" href="#" data-category-id="t2">Gluten Free</a></li>
<li><a class="cat-link" href="#" data-category-id="t3">Vegan</a></li>
<li><a class="cat-link" href="#" data-category-id="t4">Vegetarian</a></li>
<li><a class="cat-link" href="#" data-category-id="t7">Sugar Free</a></li>
<li><a class="cat-link" href="#" data-category-id="t9">Paleo</a></li>
<li><a class="cat-link" href="#" data-category-id="t12">Chicken</a></li>
<li><a class="cat-link" href="#" data-category-id="t14">Seafood</a></li>
JQuery (на codepen)
Codepen здесь:
http://codepen.io/anon/pen/raawVE
Я думаю, что я довольно близок, я только достигаю потолка со своими знаниями / навыками jQuery.