Jquery plusieurs case filtrage

J'ai trois ensembles de cases à cocher qui me permettent de filtrer un certain nombre de vrd basé sur les attributs de données. Cela fonctionne très bien, mais pas comme j'en ai besoin.

Si vous visitez la jsfiddle ci-dessous, vous verrez une épreuve de travail.

Ce que je dois faire c'est:

Lorsque plus d'une option est choisie, dans la même catégorie, par exemple les "petites" et "moyennes", il convient d'accroître les résultats c'est à dire afficher tous les "petits" et "moyen" des résultats, (qui est ce qu'il fait en ce moment).
Lorsque plus d'une option est choisie, dans différentes catégories, par exemple, "moyen" et "amérique du nord", il devrait réduire les résultats c'est à dire afficher tout "moyen" des fleurs dans "amérique du nord"

Comment pourrais-je aller sur la fixation/modifiant mon code pour faire ce travail s'il vous plaît? (J'espère que cela a un sens).

Ci-dessous est le jquery que j'utilise:

            $('.flowers-wrap, .continents-wrap').delegate('input[type=checkbox]', 'change', function() {
                var $lis = $('.flowers > div'),
                    $checked = $('input:checked');  
                if ($checked.length) {                          
                    var selector = '';
                    $($checked).each(function(index, element){
                        if(selector === '') {
                            selector += "[data-category~='" + element.id + "']";                  
                        } else {
                            selector += ",[data-category~='" + element.id + "']";
                        }
                    });                        
                    $lis.hide(); 
                    console.log(selector);
                    $('.flowers > div').filter(selector).show();               
                } else {
                    $lis.show();
                }
            });

Veuillez voir le jsfiddle que j'ai mis pour illustrer le problème, je vais avoir - http://jsfiddle.net/n3EmN/

Essayez de définir la namę propriété des cases à cocher, et quand le changement se produit une boucle par groupe de cases à cocher par leur name de la propriété.
Merci; est-ce qui me donne le résultat que je suis après?
Voici un JSFIDDLE, j'espère que ça aide.
Génial! Merci beaucoup 🙂

InformationsquelleAutor ss888 | 2014-04-01

filtering jquery

Merci beaucoup à Pho3nixHun pour son aide 🙂

Voici ma propre réponse: (jsfiddle ici).

$(document).ready(function() {
var byProperty = [], byColor = [], byLocation = [];
$("input[name=fl-colour]").on( "change", function() {
if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-size]").on( "change", function() {
if (this.checked) byColor.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(byColor, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-cont]").on( "change", function() {
if (this.checked) byLocation.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(byLocation, "[data-category~='" + $(this).attr("value") + "']");
});
$("input").on( "change", function() {
var str = "Include items \n";
var selector = '', cselector = '', nselector = '';
var $lis = $('.flowers > div'),
$checked = $('input:checked');  
if ($checked.length) {  
if (byProperty.length) {        
if (str == "Include items \n") {
str += "    " + "with (" +  byProperty.join(',') + ")\n";               
$($('input[name=fl-colour]:checked')).each(function(index, byProperty){
if(selector === '') {
selector += "[data-category~='" + byProperty.id + "']";                     
} else {
selector += ",[data-category~='" + byProperty.id + "']";    
}                
});                 
} else {
str += "    AND " + "with (" +  byProperty.join(' OR ') + ")\n";                
$($('input[name=fl-size]:checked')).each(function(index, byProperty){
selector += "[data-category~='" + byProperty.id + "']";
});
}                           
}
if (byColor.length) {                       
if (str == "Include items \n") {
str += "    " + "with (" +  byColor.join(' OR ') + ")\n";                   
$($('input[name=fl-size]:checked')).each(function(index, byColor){
if(selector === '') {
selector += "[data-category~='" + byColor.id + "']";                    
} else {
selector += ",[data-category~='" + byColor.id + "']";   
}                
});                 
} else {
str += "    AND " + "with (" +  byColor.join(' OR ') + ")\n";               
$($('input[name=fl-size]:checked')).each(function(index, byColor){
if(cselector === '') {
cselector += "[data-category~='" + byColor.id + "']";                   
} else {
cselector += ",[data-category~='" + byColor.id + "']";  
}                   
});
}           
}
if (byLocation.length) {            
if (str == "Include items \n") {
str += "    " + "with (" +  byLocation.join(' OR ') + ")\n";                
$($('input[name=fl-cont]:checked')).each(function(index, byLocation){
if(selector === '') {
selector += "[data-category~='" + byLocation.id + "']";                     
} else {
selector += ",[data-category~='" + byLocation.id + "']";    
}                
});             
} else {
str += "    AND " + "with (" +  byLocation.join(' OR ') + ")\n";                
$($('input[name=fl-cont]:checked')).each(function(index, byLocation){
if(nselector === '') {
nselector += "[data-category~='" + byLocation.id + "']";                    
} else {
nselector += ",[data-category~='" + byLocation.id + "']";   
}   
});
}            
}
$lis.hide(); 
console.log(selector);
console.log(cselector);
console.log(nselector);
if (cselector === '' && nselector === '') {         
$('.flowers > div').filter(selector).show();
} else if (cselector === '') {
$('.flowers > div').filter(selector).filter(nselector).show();
} else if (nselector === '') {
$('.flowers > div').filter(selector).filter(cselector).show();
} else {
$('.flowers > div').filter(selector).filter(cselector).filter(nselector).show();
}
} else {
$lis.show();
}   
$("#result").html(str); 
});
function removeA(arr) {
var what, a = arguments, L = a.length, ax;
while (L > 1 && arr.length) {
what = a[--L];
while ((ax= arr.indexOf(what)) !== -1) {
arr.splice(ax, 1);
}
}
return arr;
}
});

InformationsquelleAutor ss888

0

Vous devez cacher les éléments avant de les filtrer et de les montrer après, ajouter un .hide() avant la .filter(selector). Comme:
```
$('.flowers > div').hide().filter(selector).show(); 
```
Cela doit cacher tous les éléments, puis cliquez sur afficher les éléments sélectionnés.

DÉMO
- Acclamations; mais il n'a pas répondu à ma question!? :0
InformationsquelleAutor MacMac

Vous devez vous connecter pour publier un commentaire.