jQuery filtre avec des select

Par Amstramgram, il y a 11 ans

Javascript

Bonjour,

alors voila un petit problème sur lequel je penche depuis un petit moment. Je dois louper quelque chose. Je vous explique.

J'ai une div qui a 4 class sous cette forme :

<div class="bloc class_filtre_1_1 class_filtre_2_1 class_filtre_3_1"></div>
<div class="bloc class_filtre_1_1 class_filtre_2_2 class_filtre_3_1"></div>
<div class="bloc class_filtre_1_1 class_filtre_2_2 class_filtre_3_2"></div>
<div class="bloc class_filtre_1_1 class_filtre_2_2 class_filtre_3_3"></div>
<div class="bloc class_filtre_1_2 class_filtre_2_1 class_filtre_3_1"></div>
<div class="bloc class_filtre_1_2 class_filtre_2_2 class_filtre_3_1"></div>
<div class="bloc class_filtre_1_2 class_filtre_2_3 class_filtre_3_1"></div>
..]

.

J'ai aussi 3 select différents avec des options qui représente les class de ma div. 

<select id="filtre_1">
    <option value="class_filtre_1_1"></option>
    <option value="class_filtre_1_2"></option>
    <option value="class_filtre_1_3"></option>
    ..]
</select>
<select id="filtre_2">
    <option value="class_filtre_2_1"></option>
    <option value="class_filtre_2_2"></option>
    <option value="class_filtre_2_3"></option>
    ..]
</select>
<select id="filtre_3">
    <option value="class_filtre_3_1"></option>
    <option value="class_filtre_3_2"></option>
    ..]
</select>

Et ce que je veux au final c'est qu'avec ces 3 select j'arrive à filtrer une liste de div qui comporte les différentes class. Et pour au final qu'il ne reste que les div avec les 3 class sélectionné.

Merci

3 réponses

Vallyan, il y a 11 ans

http://codepen.io/anon/pen/LDvAF

HTML: 

<div class="bloc class_filtre_1_1 class_filtre_2_1 class_filtre_3_1">1-1-1</div>
<div class="bloc class_filtre_1_1 class_filtre_2_1 class_filtre_3_2">1-1-2</div>
<div class="bloc class_filtre_1_1 class_filtre_2_1 class_filtre_3_3">1-1-3</div>
<div class="sep"></div>
<div class="bloc class_filtre_1_1 class_filtre_2_2 class_filtre_3_1">1-2-1</div>
<div class="bloc class_filtre_1_1 class_filtre_2_2 class_filtre_3_2">1-2-2</div>
<div class="bloc class_filtre_1_1 class_filtre_2_2 class_filtre_3_3">1-2-3</div>
<div class="sep"></div>
<div class="bloc class_filtre_1_1 class_filtre_2_3 class_filtre_3_1">1-3-1</div>
<div class="bloc class_filtre_1_1 class_filtre_2_3 class_filtre_3_2">1-3-2</div>
<div class="bloc class_filtre_1_1 class_filtre_2_3 class_filtre_3_3">1-3-3</div>
<div style="clear: both;"></div>
<div class="bloc class_filtre_1_2 class_filtre_2_1 class_filtre_3_1">2-1-1</div>
<div class="bloc class_filtre_1_2 class_filtre_2_1 class_filtre_3_2">2-1-2</div>
<div class="bloc class_filtre_1_2 class_filtre_2_1 class_filtre_3_3">2-1-3</div>
<div class="sep"></div>
<div class="bloc class_filtre_1_2 class_filtre_2_2 class_filtre_3_1">2-2-1</div>
<div class="bloc class_filtre_1_2 class_filtre_2_2 class_filtre_3_2">2-2-2</div>
<div class="bloc class_filtre_1_2 class_filtre_2_2 class_filtre_3_3">2-2-3</div>
<div class="sep"></div>
<div class="bloc class_filtre_1_2 class_filtre_2_3 class_filtre_3_1">2-3-1</div>
<div class="bloc class_filtre_1_2 class_filtre_2_3 class_filtre_3_2">2-3-2</div>
<div class="bloc class_filtre_1_2 class_filtre_2_3 class_filtre_3_3">2-3-3</div>
<div style="clear: both;"></div>
<div class="bloc class_filtre_1_3 class_filtre_2_1 class_filtre_3_1">3-1-1</div>
<div class="bloc class_filtre_1_3 class_filtre_2_1 class_filtre_3_2">3-1-2</div>
<div class="bloc class_filtre_1_3 class_filtre_2_1 class_filtre_3_3">3-1-3</div>
<div class="sep"></div>
<div class="bloc class_filtre_1_3 class_filtre_2_2 class_filtre_3_1">3-2-1</div>
<div class="bloc class_filtre_1_3 class_filtre_2_2 class_filtre_3_2">3-2-2</div>
<div class="bloc class_filtre_1_3 class_filtre_2_2 class_filtre_3_3">3-2-3</div>
<div class="sep"></div>
<div class="bloc class_filtre_1_3 class_filtre_2_3 class_filtre_3_1">3-3-1</div>
<div class="bloc class_filtre_1_3 class_filtre_2_3 class_filtre_3_2">3-3-2</div>
<div class="bloc class_filtre_1_3 class_filtre_2_3 class_filtre_3_3">3-3-3</div>
<div style="clear: both;"></div>
select the following divs:
<select class="filtre" id="filtre_1">
    <option value=""></option>
    <option value=".class_filtre_1_1">1</option>
    <option value=".class_filtre_1_2">2</option>
    <option value=".class_filtre_1_3">3</option>
</select>-

<select class="filtre" id="filtre_2">
    <option value=""></option>
    <option value=".class_filtre_2_1">1</option>
    <option value=".class_filtre_2_2">2</option>
    <option value=".class_filtre_2_3">3</option>
</select>-

<select class="filtre" id="filtre_3">
    <option value=""></option>
    <option value=".class_filtre_3_1">1</option>
    <option value=".class_filtre_3_2">2</option>
    <option value=".class_filtre_3_3">3</option>
</select>

CSS: 

div.bloc{
    height: 15px;
    width: 50px;
    margin: 10px;
    float: left;
    font-size: 10px;
    padding: 10px;
    display: table;
    vertical-align: middle;
}
.not_highlighted{
    color: rgba(255, 255, 255, 0);
}
.highlighted{
    background-color: red;
}
div.sep{
    width: 0px;
    margin: 10px;
    float: left;
}

JS: 

$(".filtre").change(function(){
    $("div.bloc").removeClass('highlighted').addClass('not_highlighted');
    var selector = '';
    $(".filtre").each(function(i, e, a){
        selector+=$(this).val();
        if(i == $(".filtre").length-1)
            $("div.bloc"+selector).removeClass('not_highlighted').addClass('highlighted');
    });
});
Amstramgram, il y a 11 ans

Oui c'est ca, merci. Je n'avais pas pensé à mettre le point pour la class dans la value du select.

Je suis aussi arrivé a un résultat mais il est beaucoup beaucoup plus long...

(function($){
 var article = $('.bloc');
 $('.tri_distributeurs select').change(function () {
    event.preventDefault();
    filterSelect();
 }).trigger('change');

 function filterSelect(){
    event.preventDefault();
    console.log(" ___________________________");
    var value_select_distributeur = $("#select_distributeur").val();
    var value_select_departement = $("#select_departement").val();
    var value_select_gamme = $("#select_gamme").val();
    console.log("1 : "+value_select_distributeur);
    console.log("2 : "+value_select_departement);
    console.log("3 : "+value_select_gamme);
    if(value_select_distributeur != 'none' || value_select_departement != 'none' || value_select_gamme != 'none'){
        article.removeClass('hidden');
        if(value_select_distributeur != 'none'){
             $('.bloc:not(.'+value_select_distributeur+')').addClass('hidden');
        }
        if(value_select_departement != 'none'){
             $('.bloc:not(.'+value_select_departement+')').addClass('hidden');
        }
        if(value_select_gamme != 'none'){
             $('.bloc:not(.'+value_select_gamme+')').addClass('hidden');
        }
        if(value_select_distributeur != 'none' && value_select_departement != 'none' || value_select_departement != 'none' && value_select_gamme != 'none' || value_select_departement != 'none' && value_select_gamme != 'none'){
            article.removeClass('hidden');
            if(value_select_distributeur != 'none' && value_select_departement != 'none'){
                $('.bloc:not(.'+value_select_departement+'.'+value_select_distributeur+')').addClass('hidden');
            }
            else if(value_select_departement != 'none' && value_select_gamme != 'none'){
                $('.bloc:not(.'+value_select_gamme+'.'+value_select_departement+')').addClass('hidden');
            }
            else if(value_select_distributeur != 'none' && value_select_gamme != 'none'){
                $('.bloc:not(.'+value_select_gamme+'.'+value_select_distributeur+')').addClass('hidden');
            }
        }
        if(value_select_distributeur != 'none' & value_select_departement != 'none' & value_select_gamme != 'none' ){
            $('.bloc:not(.'+value_select_gamme+'.'+value_select_departement+'.'+value_select_distributeur+')').addClass('hidden');
        }
    }
    else {
        article.removeClass('hidden');
    }
    console.log(" ___________________________");
 }

})(jQuery);
Vallyan, il y a 11 ans

oula, oui, c'était plus long ! ^^