jQuery Produkt-Filterung auf mehreren Kategorien mit Hilfe von Checkboxen

Diese Frage ist eine weitere Entwicklung dieser Frage:

jQuery einfache checkbox zum ein-und ausblenden von divs (Produktfilter) die beantwortet wurde hervorragend von ManseUK

ManseUK Lösung fähiges Produkt gefiltert nach einer Kategorie, die speziell Genres, aber für mein Aktuelles Projekt brauche ich, um zu Sortieren nach 2 Kategorien: Farbe und Größe. Durch ändern ManseUK die Lösung, die ich fast das es funktioniert, aber es funktioniert nicht, wenn ich zwei Filter ausgewählt - in diesem Beispiel durch die Auswahl von 'Türkis' und 'xl' sollte nur zeigen die xl-cyan, sondern es zeigt die beiden Cyan, anstatt nur die xl-cyan. Der code, den ich verwende ist wie folgt:

HTML:

<input type="checkbox" id="cyan" value="cyan" /> Cyan<br />
<input type="checkbox" id="magenta" value="magenta" /> Magenta<br />
<input type="checkbox" id="black" value="black" /> Black<br />
<input type="checkbox" id="xl" value="xl" /> XL<br />

<!--------------------->
<div class="products">
    <div class="productItem" data-price="250" data-category="cyan">
        Cyan Ink
        <div class="productItemPrice"><span>&pound;250</span></div>
    </div>
    <div class="productItem" data-price="150" data-category="magenta">
        Magenta Ink
        <div class="productItemPrice"><span>&pound;150</span></div>
    </div>
    <div class="productItem" data-price="250" data-category="black">
        Black Ink        <div class="productItemPrice"><span>&pound;250</span></div>
    </div>
    <div class="productItem" data-price="241" data-category="cyan" data-size="xl">
        XL Cyan Ink
        <div class="productItemPrice"><span>&pound;241</span></div>
    </div>
</div>
<!--------------------->​

CSS:

.productItem{float:left;padding:5px;margin:5px;border:1px solid #eaeaea}
body{font-family:verdana}

JS:

$('input[type="checkbox"]').click(function() {
    if ($('input[type="checkbox"]:checked').length > 0) {
        $('.products >div').hide();
        $('input[type="checkbox"]:checked').each(function() {
            $('.products >div[data-category=' + this.id + ']').show();
            $('.products >div[data-size=' + this.id + ']').show();
        });
    } else {
        $('.products >div').show();
    }
});​

JSFIDDLE der obige code

Kann ich sehen, dass die js ist die Durchführung einer logischen ODER auf die divs zu zeigen - wie kann ich diese ein UND?

InformationsquelleAutor RayZor | 2012-11-08

  1. 1

    Einige änderungen vorgenommen, um den code ..

    • Zwischengespeicherten Variablen.

    • Sind Sie Schleife über alle Checkboxen und die Zuordnung der id ' s zu

      es. Sie benötigen zur Abfrage der Größe getrennt, da es ein anderes

      entity..

    • Bin ich Schleife nur die Kontrollkästchen, die ist nicht groß .. Alle Farben

    • Ist eine Kontrolle der Größe ist, überprüfen Sie auch für jede Farbe...

    VOLLSTÄNDIGEN CODE

     $('input[type="checkbox"]').click(function() {
    //Cache These Variables
    var $checked = $('input[type="checkbox"]:checked');
    var $productsDiv = $('.products > div');
    var $sizeCheckBox = $('input[type="checkbox"][value="xl"]');

    if ($checked.length > 0) {
        $productsDiv.hide();
        //If only XL Checkbox is Checked
        if ($checked.length == 1 && $sizeCheckBox.is(':checked')) {
              $('.products > div[data-size=' + $sizeCheckBox.attr('id') + ']')
                 .show();
        } 
        //If Others are also Checked
        else {
            //All Checkboxes and Not Size Checkbox
            $checked.not($sizeCheckBox).each(function() {
                var dataSize = '';
                if ($sizeCheckBox.is(':checked')) {
                    dataSize = '[data-size=' + $sizeCheckBox.attr('id') + ']';
                }
                $('.products >div[data-category=' + this.id + ']' 
                             + dataSize).show();
            });
        }
    } else {
        $productsDiv.show();
    }
});​

    Überprüfen Fiddle

    Nein das funktioniert nicht: jsfiddle.net/stwAp
    Ich habe einige änderungen vorgenommen, um die post .. haben Sie einen Blick auf Sie
    Das ist wirklich nah - aber ich brauche es, um zu zeigen, das "Cyan XL', wenn nur die XL aktiviert ist, ist das möglich? (Vielen Dank für Eure Hilfe - Sie sind ein Lebensretter)
    benötigen Sie einmal mehr prüfen Zustand .. Hinzugefügt .. Check post editiert
    Absolut hervorragend - danke Sehr! =D

    InformationsquelleAutor Sushanth --

Schreibe einen Kommentar