Frage

Wo alles begann : Ich habe hier bereits eine Frage zu Filtern gestellt: Filterergebnis mit JQuery oder JS aus einem vorhandenen Wertsatz

Problem :
Da die Daten von einer anderen Seite über a kommen form post, Alle Werte sollen zunächst sichtbar sein ...... so kann der Benutzer diese Daten durchgehen und falls erforderlich, hat er das Privileg, Filter zu verwenden, um die Anforderungen zu klären.

Was lässt mich wie ein Zugschreck fühlenist, dass die Werte (zu filtern) auf der Seite standardmäßig sichtbar sein sollen und dann, wenn der Benutzer auf Say klickt class="tv", alle anderen div classes die nicht enthalten tv sollte verstecken

Wo bin ich festgefahren ???
Ich habe versucht, eine jQuery zu trainieren, die ich logischerweise richtig hielt, aber das Ergebnis ließ mich etwas anderes glauben :(

Problem mit früheren Frage
Meine vorherige Frage half bei der Filterung ... aber die Daten waren hide() Standardmäßig ... ich brauchte umgekehrt ....

Anstrengung und Geigen?
Geige : http://jsfiddle.net/logintomyk/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>

Mein 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();
}); 
War es hilfreich?

Lösung

Das könnte einfacher sein

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
        });  
    }
});

machte eine Geige: http://jsfiddle.net/filever10/f8vk2/

abbauen

puts sind die Kontrollkästchen

cans ist die Inhaltsblöcke

Wenn sich ein Kontrollkästchen -Status ändert, wird es, wenn derzeit nichts überprüft wird, alles angezeigt. Wenn etwas überprüft wird, verbirgt es alle Inhaltsblöcke und zeigt alle, die eine Klasse haben, die dem entspricht id eines geprüften Kontrollkästchens. Es zeigt nur Dinge, die versteckt sind, sodass es nicht mehrmals auf Inhaltsblöcken ausführen muss, die für mehrere geprüfte Kontrollkästchen gelten.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top