Я пытаюсь создать фильтр, который сортирует лыжи по категориям, но он не работает на устройствах с сенсорным экраном и в chrome, но работает в firefox. В каждом div, который я хочу отсортировать, я помещаю класс категории и один из .item. Вот HTML фильтра, который я пытаюсь сделать:
<div class="d-flex flex-row align-items-center">
<nav class="product-filter">
<div class="sort">
<div class="collection-sort">
<label>Catégories</label>
<select>
<option id="tout">Tout</option>
<option id="freeride">Freeride</option>
<option id="piste">Piste</option>
<option id="tterrain">Tout Terrain</option>
<option id="touring">Touring</option>
</select>
</div>
<div class="collection-sort">
<label>Trier par</label>
<select>
<option id="tout1">Tout</option>
<option id="homme">Homme</option>
<option id="femme">Femme</option>
</select>
</div>
</div>
</nav>
</div>
Ski div:
<div class="product-card touring homme item">
<div class="product-image">
<img id="notcenter1" src="/images/M-TOUR99min.jpg" class="mx-auto d-block">
</div>
<div class="product-info">
<h5>M-Tour 99</h5>
<h6 id="container4">
<div class="button" id="button-7">
<div id="dub-arrow">99.99$</div>
<a href="#">Essayer</a>
</div>
</h6>
</div>
</div>
Все мои лыжи div настроены на класс фрирайда, или tterrain, или touring, или piste, tout и homme или femme.
Как мне заставить его работать на устройствах с сенсорным экраном и во всех браузерах?
Сценарий:
$(function(){
$('#tout').click(function(){
$('.item').show();
return false;
});
$('#tterrain').click(function(){
$('.item').show();
$('.item').not('.tterrain').hide();
return false;
});
$('#piste').click(function(){
$('.item').show();
$('.item').not('.piste').hide();
return false;
});
$('#freeride').click(function(){
$('.item').show();
$('.item').not('.freeride').hide();
return false;
});
$('#touring').click(function(){
$('.item').show();
$('.item').not('.touring').hide();
return false;
});
$('#tout1').click(function(){
$('.item').show();
return false;
});
$('#homme').click(function(){
$('.item').show();
$('.item').not('.homme').hide();
return false;
});
$('#femme').click(function(){
$('.item').show();
$('.item').not('.femme').hide();
return false;
});
});