Столкнувшись с некоторыми проблемами с jQuery, поскольку я новичок в этом, у меня есть некоторый код jQuery, который скрывает меню фильтра из <li> элементов. Однако, когда я использую это, он также скрывает теги <li>, которые я использую в заголовке главного меню.
Я думал назначить определенное имя класса для <li>, чтобы быть скрытым, но они уже используют определенные имена. (например, бухгалтерия, курьер и т. д.)
Как я могу скрыть только определенные теги <li>, а не теги в заголовке главного меню? Могу ли я назначить другой идентификатор для <li>, которые я хочу скрыть?
HTML-код для скрытия li:
<div class="tags">
<div id="col">
<label>
<input type="checkbox" rel="accounting" />Accounting</label>
</div>
<div id="col">
<label>
<input type="checkbox" rel="courier" />Courier</label>
</div>
<div id="col">
<label>
<input type="checkbox" rel="project-management" />Project Management</label>
</div>
<div id="col">
<label>
<input type="checkbox" rel="video-games" />Video Games</label>
</div>
</div>
<ul class="results">
<li class="accounting" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Accounting</a>
</li>
<li class="courier" style="list-style-type:none"><a href="{{ path('job1') }}" style="text-decoration: none">Courier / Parcel Delivery</a>
</li>
<li class="project-management" style="list-style-type:none"><a href="{{ path('job3') }}" style="text-decoration: none">Game QA Project Management</a>
</li>
<li class="video-games" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Video Games</a>
</li>
</ul>
Код jQuery (скрывает все теги li)
<script>
$('div.tags').find('input:checkbox').on('click', function () {
var vals = $('input:checkbox:checked').map(function () {
return $(this).attr('rel');
}).get();
$('li').hide().filter(function () {
return ($.inArray($(this).attr('class'), vals) > -1)
}).show()
if ($('input:checkbox:checked').length == 0) $('li').show()
});
</script>
