.click () не работает на устройствах с сенсорным экраном и chrome, но работает на firefox на ПК - PullRequest
0 голосов
/ 27 апреля 2020

Я пытаюсь создать фильтр, который сортирует лыжи по категориям, но он не работает на устройствах с сенсорным экраном и в 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;
});
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...