Comment puis-je pas répéter cette fonction

Question

J'ai un système de filtrage sur mon blog, ça fonctionne bien, mais je me demande juste comment je ne peux pas répéter cette fonction encore et encore.

Heres le code html:

<div class="postFilter"> 
     <ul> 
      <li><a href="#" class="filter filter1 filterActive">all</a></li> 
      <li><a href="#" class="filter filter2">another link</a></li> 
      <li><a href="#" class="filter filter3">third link</a></li> 
      <li><a href="#" class="filter filter4">fourth</a></li> 
      <li><a href="#" class="filter filter5">fifth</a></li> 
     </ul> 
    </div><!-- /.postFilter --> 

et jquery j'utilise:

$('.filter1').on('click', function(e){ 
    e.preventDefault(); 

    // add & Remove filter 

    $('.filter').removeClass('filterActive'); 
    $('.filter1').addClass('filterActive'); 

    // hide & show categories 

    $('.categ').hide(); 
    $('.categ1').show(); 
}); 

$('.filter2').on('click', function(e){ 
    e.preventDefault(); 

    // add & Remove filter 

    $('.filter').removeClass('filterActive'); 
    $('.filter2').addClass('filterActive'); 

    // hide & show categories 

    $('.categ').hide(); 
    $('.categ2').show(); 
}); 

je le répète 5 fois, je sais ce que je veux faire, je veux voir si le filtre clicked est égal à 1,2,3,4,5 puis affiche le code de la fonction répondante. mais je ne sais pas par où commencer.

oublié de mentionner que j'ai essayé:

var filterNum; 

$('.filter').on('click', function(e){ 
    e.preventDefault(); 

    if($('.filter').hasClass('filter1')){ 
     filterNum = 1; 
    }else if($('.filter').hasClass('filter2')){ 
     filterNum = 2; 
    }else if($('.filter').hasClass('filter3')){ 
     filterNum = 3; 
    }else if($('.filter').hasClass('filter4')){ 
     filterNum = 4; 
    }else if($('.filter').hasClass('filter5')){ 
     filterNum = 5; 
    } 

    filterClick(filterNum); 
}); 



function filterClick(number){ 
    // add & Remove filter 

    $('.filter').removeClass('filterActive'); 
    $('.filter' + number).addClass('filterActive'); 

    // hide & show categories 

    $('.categ').hide(); 
    $('.categ' + number).show(); 
} 

Answer 1

Utilisez this pour se référer à la cliqué sur elemten. De plus que vous pouvez utiliser une coutume data attribut référence aux catégories que vous souhaitez afficher:

$('.filter').on('click', function(e) { 
 
    e.preventDefault(); 
 

 
    // add & Remove filter 
 
    var $this = $(this); 
 

 
    $('.filter').removeClass('filterActive'); 
 
    $this.addClass('filterActive'); 
 

 
    // hide & show categories 
 
    $('.categ').hide(); 
 
    $('.' + $this.data('cat')).show(); 
 
});

.filterActive { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="postFilter"> 
 
    <ul> 
 
    <li><a href="#" class="filter filterActive" data-cat="categ1">all</a></li> 
 
    <li><a href="#" class="filter" data-cat="categ2">another link</a></li> 
 
    <li><a href="#" class="filter" data-cat="categ3">third link</a></li> 
 
    <li><a href="#" class="filter" data-cat="categ4">fourth</a></li> 
 
    <li><a href="#" class="filter" data-cat="categ5">fifth</a></li> 
 
    </ul> 
 
</div> 
 
<div class="cat"> 
 
    <div class="categ categ1"> 
 
    Cat1 
 
    </div> 
 
    <div class="categ categ2"> 
 
    Cat2 
 
    </div> 
 
    <div class="categ categ3"> 
 
    Cat3 
 
    </div> 
 
    <div class="categ categ4"> 
 
    Cat4 
 
    </div> 
 
    <div class="categ categ5"> 
 
    Cat5 
 
    </div> 
 
</div>

Answer 2

var $filters = $('.filter'); 
var $filtered = $('.categ'); 

$filters.on('click', function(){ 
    $filters.removeClass('filterActive'); 
    $(this).addClass('filterActive'); 
    $filtered.removeClass('filterActive'); 
    $filtered.eq(k).addClass('filterActive'); 
}); 

https://codepen.io/mrbizle/pen/vZKYgq

De cette façon, nous ne devons pas créer des charges d'objets jQuery

Answer 3

Si vous pouvez modifier le code HTML, j'utiliser des attributs-données pour vous faciliter la tâche :

<div class="postFilter"> 
     <ul> 
      <li><a href="#" data-filterid="1" class="filter filterActive">all</a></li> 
      <li><a href="#" data-filterid="2" class="filter ">another link</a></li> 
      <li><a href="#" data-filterid="3" class="filter ">third link</a></li> 
      <li><a href="#" data-filterid="4" class="filter ">fourth</a></li> 
      <li><a href="#" data-filterid="5" class="filter ">fifth</a></li> 
     </ul> 
    </div><!-- /.postFilter --> 

---

$('.filter').on('click', function(e){ 
    e.preventDefault(); 

    $('.filter').removeClass('filterActive'); 
    $(this).addClass('filterActive'); 

    $('.categ').hide(); 
    $('.categ' + $(this).data('filterid')).show(); 
}); 

Answer 4

Où est-ce .categ? En supposant que c'est à l'intérieur du <li>, cela devrait fonctionner: ('filtre').

$('.filter').on('click', function(e) { 
 
    e.preventDefault(); 
 
    // add & Remove filter 
 
    $('.filter').removeClass('filterActive'); 
 
    $(this).addClass('filterActive'); 
 
    // hide & show categories 
 
    $('.categ').hide(); 
 
    $(this).next('.categ').show(); 
 
    /* If .categ is inside the .filter, use this instead: 
 
    $(this).find('.categ').show(); 
 
    And if .categ is outside, you'll need to use something like: 
 
    $(this).parents().next('.categ').show(); 
 
    */ 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="postFilter"> 
 
    <ul> 
 
    <li><a href="#" class="filter filter1 filterActive">all</a><span class="categ categ1" style="display: none;">categ</span></li> 
 
    <li><a href="#" class="filter filter2">another link</a><span class="categ categ2" style="display: none;">categ</span></li> 
 
    <li><a href="#" class="filter filter3">third link</a><span class="categ categ3" style="display: none;">categ</span></li> 
 
    <li><a href="#" class="filter filter4">fourth</a><span class="categ categ4" style="display: none;">categ</span></li> 
 
    <li><a href="#" class="filter filter5">fifth</a><span class="categ categ5" style="display: none;">categ</span></li> 
 
    </ul> 
 
</div>