Ich habe drei Kontrollkästchensätze, mit denen ich eine Reihe von Divs basierend auf Datenattributen filtern kann. Das funktioniert super aber nicht so wie ich es brauche.

Wenn Sie die besuchenjsfiddle Unten sehen Sie einen Funktionstest.

Was ich tun muss, ist:

Wenn mehr als eine Option innerhalb derselben Kategorie ausgewählt wird, z. "Klein" und "Mittel" sollten die Ergebnisse gesteigert werden, d. h. alle "Klein" - und "Mittel" -Ergebnisse werden angezeigt (was im Moment der Fall ist).

Wenn mehr als eine Option in verschiedenen Kategorien ausgewählt wird, z. 'mittel' und 'nordamerika' sollten die Ergebnisse reduzieren, d. h. alle 'mittelgroßen' Blumen in 'nordamerika' anzeigen

Wie würde ich vorgehen, um meinen Code zu reparieren / zu ändern, damit dies funktioniert? (Ich hoffe das macht Sinn).

Unten ist die jquery, die ich benutze:

            $('.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();
                }
            });

Bitte schauen Sie sich die jsfiddle an, die ich eingerichtet habe, um das Problem zu demonstrieren, das ich habe -http://jsfiddle.net/n3EmN/