Novice complet: Comment puis-je obtenir ce filtre de projet pour correspondre à un mot dans le filtre de données

Question

Je suis un novice complet à Jquery, mais j'ai essayé de lire et de pirater ce code, mais je ne reçois nulle part.

Je suis bloqué sur ce modèle pour que le filtre corresponde à plus d'un filtre de données à la fois. J'essaie de rendre l'image visible à la fois numérique et réactif. Ci-dessous, il est réglé sur "numérique", mais est-il possible de le rendre actif sur plus d'un filtre de données à la fois? Je me sens comme si j'avais un peu plus de compréhension de ce qui me manquait, je pourrais être en mesure de le comprendre. Là encore, cela pourrait être compliqué pour un novice comme moi.

Merci d'avoir pris le temps de jeter un coup d'œil.

Le site est sur http://madethis.media si cela est d'une aide supplémentaire.

$('.project-filters a').click(function(el) { 
 
    el.preventDefault(); 
 
    var filter = $(this).data('filter'); 
 

 
    $('.project-filters a').removeClass('active'); 
 
    $(this).addClass('active'); 
 

 
    if(filter != 'all') { 
 
     $('.project').removeClass('inactive').not('[data-filter="' + filter + '"]').addClass('inactive'); 
 
    } 
 
    else { 
 
     $('.project').removeClass('inactive'); 
 
    } 
 
});

.projects .project-filters { 
 
\t text-align: center; 
 
\t margin: 0 auto; 
 
\t padding: 20px 5%; 
 
\t list-style-type: none; 
 
\t border-top: 1px solid #f5f5f5; 
 
} 
 
.projects .project-filters > li { 
 
\t display: inline; 
 
\t font-size: 12px; 
 
\t font-size: 0.750rem; 
 
\t letter-spacing: 0.2em; 
 
\t text-transform: uppercase; 
 
} 
 
.projects .project-filters > li + li { 
 
\t margin-left: 15px; 
 
} 
 
.projects .project-filters > li a { 
 
\t color: #000; 
 
\t font-weight: 700; 
 
\t text-decoration: none; 
 
} 
 
.projects .project-filters > li a.active { 
 
\t color: #fff; 
 
\t background-color:#feeb00; 
 
\t padding:16pt; 
 
\t 
 
\t text-shadow: 1pt 1pt #cfae18; 
 
} 
 
.projects .project-filters > li a:hover { 
 
\t color: #6c6c6c; 
 
} 
 
.projects .project { 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t -webkit-transition: opacity 0.3s ease-in-out; 
 
\t -moz-transition: opacity 0.3s ease-in-out; 
 
\t -o-transition: opacity 0.3s ease-in-out; 
 
\t -ms-transition: opacity 0.3s ease-in-out; 
 
\t transition: opacity 0.3s ease-in-out; 
 
} 
 
.projects .project.inactive { 
 
\t opacity: 0.3; 
 
} 
 
.projects .project:hover { 
 
\t opacity: 1; 
 
} 
 
.projects .project .project-thumb img { 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 
.projects .project .project-overlay { 
 
\t position: absolute; 
 
\t z-index: 2; 
 
\t top: 0; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t font-size: 14px; 
 
\t text-align: center; 
 
\t background-color: #feeb00; 
 
\t opacity: 0; 
 
} 
 
.projects .project .project-overlay .project-links { 
 
\t width: 90%; 
 
\t height: 44px; 
 
\t margin: auto; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t bottom: 0; 
 
\t right: 0; 
 
} 
 
.projects .project .project-overlay a { 
 
\t display: inline-block; 
 
\t height: 40px; 
 
\t width: 40px; 
 
\t margin: 0 5px; 
 
\t color: #000; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t border: 2px solid #000; 
 
\t -webkit-border-radius: 50%; 
 
\t -moz-border-radius: 50%; 
 
\t border-radius: 50%; 
 
} 
 
.projects .project .project-overlay a i.fa { 
 
\t line-height: 36px; 
 
} 
 
.projects .project .project-overlay a:hover { 
 
\t color: #fff; 
 
\t border-color: #fff; 
 
} 
 
.projects .project .project-gallery { 
 
\t display: none; 
 
} 
 
.projects .project .project-info { 
 
\t display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 

 
<div class="row no-gutter projects"> 
 
    <!-- Start: Filters --> 
 
    <ul class="project-filters"> 
 
     <li><a href="#" data-filter="all" class="active" title="All">All</a></li> 
 
     <li><a href="#" data-filter="digital" title="Digital">Digital</a></li> 
 
     <li><a href="#" data-filter="print" title="Print">Print</a></li> 
 
     <li><a href="#" data-filter="branding" title="Branding">Branding</a></li> 
 
     <li><a href="#" data-filter="responsive" title="responsive">Responsive</a></li> 
 
    </ul> 
 
    <!-- End: Filters --> 
 

 
    <!-- Start: Project --> 
 
    <div class="col-xs-6 col-md-4 project" data-filter="digital"> 
 
     <div class="project-thumb"><img src="assets/img/projects/digital-responsive-1-thumb.jpg" alt=""></div> 
 

 
     <!-- Project Overlay --> 
 
     <div class="project-overlay"> 
 
      <div class="project-links"> 
 
       <a href="assets/img/projects/digital-1-jdf-a.jpg" title="JD Fitness + Nutrition" class="lightbox" data-gall="project-JDFN"><i class="fa fa-search"></i></a> 
 
       <a href="#project-JDFN-info" data-type="inline" class="info-link"><i class="fa fa-align-left"></i></a> 
 
      </div> 
 
     </div> 
 

 
     <!-- Project Info/Targeted by ID --> 
 
     <div class="project-info" id="project-JDFN-info"> 
 
      <div class="container-fluid"> 
 
       <div class="row"> 
 
        <div class="col-sm-7"> 
 
         <h4 class="small-headline">Wordpress Site: <br> 
 
          JD Fitness + Nutrition</h4> 
 
         <p>The ideation was centred around existing face to face customers mirgating to the online service. <br> 
 
          The site is accessed in various enviroments (at home, on the go, or in the gym) by users with varying computer skills. It employs minial navigation enabling basic users to stay on course while journeying through the site.<br><br> 
 
          Instrustions on how Online Personal Training and its benifits are all housed under the services and prices tab, which employs a simple yet elegant touch ready sub-navigation presenting all the relevant information in bitesize chunks with virtually no scrolling needed on any device. 
 
         </p> 
 

 
         <h5>Skills Used</h5> 
 
         <p>Wordpress - HTML - CSS - Slider Revolution - Photoshop - Illustrator.</p> 
 
        </div> 
 
        <div class="h-spacer visible-xs-block"></div> 
 
        <div class="col-sm-4 col-sm-offset-1"> 
 
         <strong>Client</strong> 
 
         <p><img src="assets/img/projects/jdflogo_dark_tiny.png" alt="J.FD Fitness &amp; Nutrition Logo"></p> 
 

 
         <hr class="sep"> 
 

 
         <strong>Project type</strong> 
 
         <p>Digital - Reponsive</p> 
 

 
         <hr class="sep"> 
 

 
         <strong>Live link</strong> 
 
         <h5><a href="www.joshdavies.co.uk " target="_blank">http://joshdavies.co.uk/</a></h5> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- End: Project -->

Answer 1

Si vous souhaitez activer le filtrage et avoir plus d'un filtre sur les projets, vous pouvez essayer ceci:

var filters = []; 
$('.project-filters a').click(function(el) { 
    el.preventDefault(); 
    var filter = $(this).data('filter'); 
    var index = filters.indexOf(filter); 
    if (index != -1) { 
     filters.splice(index, 1); 
     $(this).removeClass('active'); 
    } else { 
     $(this).addClass('active'); 
    } 

    if (filter != 'all') { 
     $('.project').removeClass('inactive') 
      .not('[data-filter="' + filters.join('"],[data-filter="') + '"]') 
      .addClass('inactive'); 
    } 
    else { 
     $('.project').removeClass('inactive'); 
    } 
});