2013-01-10 2 views
6

Questo è relativo alla casella di controllo input per il filtro jQuery isotope itemselector.jQuery isotopo checkbox filter, se tutto deseleziona show no item

Fare riferimento alla demo here, le caselle di controllo sono selezionate quando la pagina viene caricata. Tuttavia, inciampo sul problema quando tutto è deselezionato dall'utente, mostrerà solo tutto il .items invece di un contenitore vuoto.

$checkboxes.change(function(){ 
    var filters = []; 
    // get checked checkboxes values     
    $checkboxes.filter(':checked').each(function(){ 
    filters.push(this.value); 
    }); 
    // ['.red', '.blue'] -> '.red, .blue' 
    filters = filters.join(', '); 
    $container.isotope({ filter: filters }); 
}); 

Molte grazie in anticipo, Cheers

risposta

5

La biblioteca isotopo è working as intended.

filtro: consente di impostare un filtro con elementi di elementi di presentazione corrispondenti al selettore e di nascondere elementi non corrispondenti.

Valori '*' o '' (una stringa vuota): mostra tutti gli elementi voce

Se non si desidera questo comportamento, e invece vuole per non mostrare alcun elemento quando si seleziona ogni filtro , dovresti cambiare la stringa del filtro per essere qualcosa che non esiste es

if(filters.length == 0){ 
    filters = 'purplemonkyeydishwasher'; 
} 
else{ 
    filters = filters.join(', '); 
} 
$container.isotope({ filter: filters }); 

Questo avrà quindi il comportamento desiderato. I updated the fiddle. e ora nasconde tutti gli elementi quando tutti i filtri sono selezionati.

+0

grazie a @Danack, per la soluzione di lavoro e la spiegazione. –

1

Si può semplicemente fare questo:

$container.isotope({ filter: (filters == null || filters.length == 0) ? 'default' : filters });` 

Dove default è sempre inutilizzato. Guarda la demo http://jsfiddle.net/G6LRL/

+0

GRAZIE! (btw: c'è un 'alla fine della tua stringa) –