Domanda

Dove tutto è iniziato: Ho già fatto una domanda sui filtri qui: Filtro Risultato utilizzando jQuery o JS da un set di valori esistente

Problema:
Poiché i dati provengono da un'altra pagina attraverso un form post, tutti i valori dovrebbero essere visibili all'inizio ... quindi l'utente può passare attraverso tali dati e, se necessario, ha il privilegio di utilizzare i filtri per risolvere il requisito.

Cosa mi fa sentire come un traininoè che i valori (da filtrare) a pagina dovrebbero essere visibili per impostazione predefinita e quindi quando l'utente fa clic su dite class="tv", tutti gli altri div classes che non contengono tv dovrebbe nascondersi

Dove sono bloccato ???
Ho provato a elaborare un jQuery che pensavo fosse corretto logicamente ma il risultato mi ha fatto credere diversamente :(

Problema con la domanda precedente
La mia domanda precedente ha aiutato a filtrare ... ma i dati erano hide() Per impostazione predefinita ... avevo bisogno di inverso ...

Sforzo e violino ??
Violino : http://jsfiddle.net/logintomik/r6g3k/1/

Html

<!-- filter checkboxes -->
    <input type="checkbox" id="wm" class="a" />WM
    <input type="checkbox" id="tv" class="a" />tv
    <input type="checkbox" id="ac" class="a" />ac
    <input type="checkbox" id="terrace" class="a" />terrace


    <br> <hr><br>

   <!-- Results to be filtered -->
    <div class="wm field">WM</div>
    <div class="tv field">TV</div>
    <div class="ac field">ac</div>
    <div class="terrace field">terrace</div>
    <div class="wm tv field">WM TV</div>
    <div class="wm tv ac field">wm tv ac</div>
    <div class="wm terrace field">wm terrace</div>
    <div class="tv field">tv</div>
    <div class="tv ac field">tv ac</div>

il mio noob jQuery

$(document).ready(function () {
     $('.field').show(); // to show values by default


    $(".a").change(function () {
        $('div').hide(); //hide before displaying
        $(':checkbox:not(:checked)').each(function() {
            $("." + this.id).hide(); //hide unchecked filter values
        });
    }).change();
}); 
È stato utile?

Soluzione

Questo potrebbe essere più facile

var puts = $('.a');//get checkboxes
var cans = $('.field');//get content
puts.on('change', function() {//when checkbox changes
    if (!puts.filter(':checked').length) {//if nothing's checked
        cans.show();//show it all
    } else {//if something's checked
        cans.hide();//hide all
        puts.filter(':checked').each(function() {//get checked
            $('.'+this.id+':hidden').show();//show if hidden
        });  
    }
});

ha fatto un violino: http://jsfiddle.net/filever10/f8vk2/

guasto

puts sono le caselle di controllo

cans sono i blocchi di contenuto

Quando una casella di controllo cambia, se non viene attualmente verificato nulla, mostra tutto. Se qualcosa viene controllato, nasconde tutti i blocchi di contenuto e mostra uno che ha una classe che corrisponde al id di una casella a check. Mostra solo cose che sono nascoste, quindi non deve essere eseguito più volte su blocchi di contenuto che si applicano a più caselle a check.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top