jQuery-Filter mit Checkbox und li

Ich versuche, ein Javascript-Filter mit Kontrollkästchen als Filterkriterien Elemente zu erstellen und versteckt die jeweiligen <li> Elemente:jQuery-Filter mit Checkbox und li

Hier wird Probe meiner Suchfilter gemacht:

<input type=[checkbox] class="filter" data-city="Memphis"> 
<input type=[checkbox] class="filter" data-city="Cordova"> 
<input type=[checkbox] class="filter" data-city="Bartlett">

Und hier sind meine Ergebnisse:

<li class="result" data-city="Memphis">Memphis</li> 
<li class="result" data-city="Memphis">Memphis</li> 
<li class="result" data-city="Cordova">Cordova</li> 
<li class="result" data-city="Bartlett">Bartlett</li>

hier ist mein Javascript, das nicht ganz wie ich es funktioniert möchte:

$('.filter').change(function(){ 
    var city = $(this).data("city"); 
    if($(this).is(":checked")){ 
     $('li.result').is('[data-city="'+city+'"]').show(); 
     $('li.result').not('[data-city="'+city+'"]').hide(); 
    } 
    else{ 
     $('li.result').not('[data-city="'+city'"]').show(); 
    } 
});

Ich am Ende mit einem toggle-artigen Ergebnis. Wie mache ich es, wo für jede Eingabe, die überprüft wird, zeigen Sie die Li's, die damit übereinstimmen, und verstecken Sie die anderen? Außerdem, um diejenigen zu verbergen, wenn sie unkontrolliert werden.

Quelle

2016-06-24 Jason Ayer

Zum einen sind Sie nicht ein '+' in der 'else' nach' '+ Stadt' "])' – pmahomme

@mikehomme -. Ah ja, dass ein Tippfehler auf meiner Ich habe den Code nicht kopiert und eingefügt, er ist korrekt in meiner eigentlichen Datei –

Das erste, was Sie tun sollten, ist, die Konsole auf Syntaxfehler zu überprüfen und sie zu korrigieren, bevor Sie eine Frage stellen docs von ['jQuery.is'] (http://api.jquery.com/is/), das' is' gibt 'true' zurück und kein jQuery-Ergebnis, daher kann man' show' nicht darauf verweisen Englisch: www.justlanded.nl/english/Kanada/To .../Einfuehrung Schon sprechen Sie über das Filtern, warum haben Sie ['jQuery.filter '] (http://api.jquery.com/filter/) nicht verwendet? –

Klicken Sie bei jedem Kontrollkästchen auf das entsprechende Element und das Kontrollkästchen, um die Sichtbarkeit zu bestimmen.

Da Sie möchten, dass alles sichtbar ist, wenn nichts aktiviert ist, und nur Ergebnisse filtern, wenn etwas aktiviert ist, wird zusätzliche Logik am Ende des Handlers für diesen speziellen Fall platziert.

Fiddle

$('.filter').change(function(){  
    //on each click, refresh visible/hidden for each item 
    $('li.result').each(function(i, item){ 
     var city = $(this).data('city'); 
     var visible = $('input.filter[data-city="' + city + '"]:checked').length > 0; 
     visible ? $(this).show() : $(this).hide(); 
    }); 

    //if no checkboxes are checked, show everything 
    if($('input.filter:checked').length === 0) $('li.result').show(); 
});

Added einige Etiketten auf die Kontrollkästchen, um leichter zu testen.

<input type="checkbox" class="filter" data-city="Memphis"> memphis 
<input type="checkbox" class="filter" data-city="Cordova"> cordova 
<input type="checkbox" class="filter" data-city="Bartlett"> bartlett 

<ul> 
<li class="result" data-city="Memphis">Memphis</li> 
<li class="result" data-city="Memphis">Memphis</li> 
<li class="result" data-city="Cordova">Cordova</li> 
<li class="result" data-city="Bartlett">Bartlett</li> 
</ul>

Quelle

2016-06-24 19:44:58 IrkenInvader

Sie werden alle anfänglich angezeigt und daher sind alle Kontrollkästchen standardmäßig deaktiviert. Dann, als würde ich gehen und beginnen, Kästchen zu filtern, um nur diejenigen zu zeigen, die ich überprüft habe, und den ganzen Rest zu verbergen. Also im Wesentlichen das Gegenteil von dem, was du hier hast, haha. –

Ich möchte, dass es funktioniert wie Amazon.coms [Refine-Funktion] (https://s3.amazonaws.com/techboomers/rich/rich_files/rich_files/000/003/092/large/ap-20a18-20amazon-20prime- 20search-20filter-20image1.png) –

Bearbeitet, kann diesem Link im Moment nicht folgen, aber das könnte das sein, wonach Sie gesucht haben. – IrkenInvader

Startet mit deaktivierten Kontrollkästchen und Liste sichtbar. Überprüfen Sie einen und die anderen sind versteckt. Überprüfen Sie eine andere zeigt es. Deaktivieren Sie das Kontrollkästchen und es ist ausgeblendet, aber markierte Elemente werden weiterhin angezeigt.

jQuery('.filter').change(function(){ 
    var city = $(this).data("city"); 
    if(jQuery(this).is(":checked")){ 
    jQuery('li.result[data-city="'+city+'"]').show(); 
    jQuery('.filter').each(function (key, value) { 
     if (jQuery(value).is(':not(:checked)')) { 
     jQuery('li.result[data-city="'+jQuery(value).attr('data-city')+'"]:not(:checked)').hide(); 
     } 
    }); 
    } 
    else{ 
    jQuery('li.result[data-city="'+city+'"]').hide(); 
    } 
}); 

<input type=checkbox class="filter" data-city="Memphis">Memphis 
<input type=checkbox class="filter" data-city="Cordova">Cordova 
<input type=checkbox class="filter" data-city="Bartlett">Bartlett 
<ul> 
    <li class="result" data-city="Memphis">Memphis</li> 
    <li class="result" data-city="Cordova">Cordova</li> 
    <li class="result" data-city="Bartlett">Bartlett</li> 
</ul>

JSBin example

Quelle

2016-06-24 19:54:34 bloodyKnuckles

jQuery-Filter mit Checkbox und li

Antwort

Verwandte Themen