0

I am trying to make a filter that sorts skis by their category but it doesnt work on touchscreen devices and in chrome, but it works in firefox. In each div that I want to sort, I put a class of the category and one of .item. Here is the HTML of the filter I am trying to make: 

<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>

All of my skis div are set up with a class of freeride,or tterrain,or touring, or piste or tout and homme or femme.

How can I make it work on touchscreen devices and on all browsers ?

Script:

$(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;
});
});
Simon Ruelland
  • 3
  • 1
  • Just wondering, what is with all of the `return false;` I mean they aren't hurting anything, but they aren't contributing much either. – theParadox42 Apr 27 '20 at 16:00
  • @theParadox42 You are right, they aren't useful. I put them there because before I used them with href, and it allowed the – Simon Ruelland Apr 27 '20 at 16:13
  • Hi @SimonRuelland , this seems to be a duplicate of https://stackoverflow.com/questions/11397028/document-click-function-for-touch-device – Mario Perez Apr 27 '20 at 16:53
  • @MarioPerez I tried everything on this link and nothing worked for me – Simon Ruelland Apr 27 '20 at 17:13

0 Answers0