Ausblenden von Elementen basierend auf Datenattributen, Minimal- und Maximalwerten

Question

Ich erstelle einen Basisfilter, um einige Elemente aus einer Liste zu entfernen. Es gibt nur 12 Elemente, so IMO nicht genug, um mit Lazy Loading oder Rendering zu stören. Einfach jQuery verwenden, um die Elemente auszublenden.

Die Artikel werden mit Nummern aus einem Dropdown-Feld select, einem für minValue und einem für maxValue ausgefiltert. Der Wert für jedes Div ist in data-bedrooms auf dem Div gespeichert.

HTML Beispiel

<div class="property-item" data-bedrooms="7">7 bedrooms</div> 

ich meine Logik auf .change eines meiner Aufklappmenü bin auslöst. Ich verwende dann filter(), um Artikel zurückzugeben, die den Bedingungen der minValue und maxValue entsprechen (oder nicht entsprechen) und sie ein-/ausblenden.

Hier ist ein Full-Code-Stift, wo man alles in Aktion sehen können: http://codepen.io/anon/pen/ALdOLW

Was ich finde, dass die erste Auswahl funktioniert (zB wählen min 4 und Sie werden alles unter 4 entfernen), sondern versuchen, Wählen Sie einen maximalen Wert und die Dinge beginnen sich schlecht zu benehmen.

Wenn Sie den zweiten Wert auswählen, werden alle vorherigen Ergebnisse zurückgegeben. Ich muss beide Selektionen zusammenbinden.

Wohin gehe ich falsch?

Ich brauche die fadeIn und fadeOut zu überprüfen, sowohl maxValue und minValue

return $(this).attr('data-bedrooms') < minValue || > maxValue; 

aber ich bin mir bewusst, der oben ist falsche Syntax

Answer 1

OP scheint es, wie der Code im Allgemeinen arbeitete, meine Vermutung ist, dass Sie in einigen Rennbedingungen ausgeführt wurden, weil Ihr Code mehrfach wurde Animieren. Ich habe Ihren Codepen gegabelt und den Code reorganisiert, so dass Sie zwei Operationen anstelle von 4 durchführen. Ich habe auch Ihre Filterfunktion in eine separate Funktion gehievt. IMO Indem Sie diese Änderungen vornehmen, verbessern Sie die Lesbarkeit und Wartbarkeit des Codes im Laufe der Zeit.

// Translating 'min' and 'max' to numbers that we can compare against 
// This makes it easier to perform the <= >= checks 
if (minValue === 'min-default') { 
    minValue = 0; 
} 
if (maxValue === 'max-default') { 
    maxValue = 1000; // This should probably find the highest value from the available options 
} 

// Moved this out to its own function that compares the entire range at once 
function filterBedroomsRange(index, item) { 
    var bedrooms = $(item).attr('data-bedrooms'); 

    // Validate against the selected range together to avoid double filter/double animation issues 
    // The number of bedrooms must be greater than or equal to the min value, and less than, or equal to the maxValue 
    return bedrooms >= minValue && <= maxValue; 
} 


// Hide items that don't match the range 
properties.find('.property-item').filter(function(index, item) { 
    // Return the negative of `filterBedroomsRange` to find items to hide 
    return !filterBedroomsRange(index, item); 
}).fadeOut('fast'); 


// Show items that do match the range 
properties.find('.property-item').filter(filterBedroomsRange).fadeIn('fast'); 

Codepen: http://codepen.io/anon/pen/VKdPNB

Answer 2

anstatt das zu tun

if (minValue != 'min-default') { 
    $(properties).find('.property-item').filter(function() { 
     return $(this).attr('data-bedrooms') < minValue; 
    }).fadeOut('fast'); 
    $(properties).find('.property-item').filter(function() { 
     return $(this).attr('data-bedrooms') >= minValue; 
    }).fadeIn('fast'); 
    } 
    if (maxValue != 'max-default') { 
    $(properties).find('.property-item').filter(function() { 
     return $(this).attr('data-bedrooms') > maxValue; 
    }).fadeOut('fast'); 
    $(properties).find('.property-item').filter(function() { 
     return $(this).attr('data-bedrooms') <= maxValue; 
    }).fadeIn('fast'); 
    } 

Sie kombinieren sollte tun

$(properties).find('.property-item').filter(function() { 
     return ((minValue != 'min-default') && $(this).attr('data-bedrooms') < minValue) || ((maxValue != 'max-default') && $(this).attr('data-bedrooms') > maxValue); 
    }).fadeOut('fast'); 
    $(properties).find('.property-item').filter(function() { 
     return ((minValue != 'min-default') && $(this).attr('data-bedrooms') >= minValue) && ((maxValue != 'max-default') && $(this).attr('data-bedrooms') <= maxValue); 
    }).fadeIn('fast'); 

Scheck http://codepen.io/anon/pen/dpKNAZ