ausblenden von Elementen aus einem filter

Ich bin neu bei jquery und ich versuche, Folgendes zu tun :
Ich habe eine Seite mit vielen Bildern. Ich habe eine textbox, mit onchange Aufruf dieser Funktion :

function filter() {
    var filter = $("#filter").val()
    $('.photo').show();  
    if (filter != '') $('.photo').find('.'+filter).hide();

}

Den Punkt zu zeigen nur Bilder, die "filter" irgendwo in Ihre Klasse Namen.

BEARBEITEN

<a name="test"></a>

<h3>Tests</h3><br />
<img class="photo livre_gang_leader.jpg" src="/images/test/livre_gang_leader.jpg" />
<img class="photo stephen_king_fatal.jpg" src="/images/test/stephen_king_fatal.jpg" />
<img class="photo livres_millenium.jpg" src="/images/test/livres_millenium.jpg" /></a>
<img class="photo martin_page_stupide.jpg" src="/images/test/martin_page_stupide.jpg" />
<img class="photo Civilization-V-Title.jpg" src="/images/test/Civilization-V-Title.jpg" />
<br /><br />

BEARBEITEN

<form onSubmit="javascript:filter()">
    <input type="textbox" placeholder="Filtre" id="filter" />
    <input type="submit" value="filtrer">
</form><br />
  • es kann sein, $('.Foto').find('.'+filter), die müssen ersetzt werden durch $('.Foto .'+filter), aber ohne das html-markup, es ist schwer zu sagen. Können Sie es auch ?
InformationsquelleAutor Manu | 2011-02-08
  1. 3

    Wenn Sie wollen auch passend für classname Fragmente (z.B. um zu zeigen, "Apfel", wenn die Eingabe von "ple"), erwägen Sie die Verwendung der Attribut enthält selector '[class*="'+filter+'"]'. In Kombination mit den oben genannten Antworten:

    function filter() {
    var filter = $("#filter").val();
    var photos = $('.photo');
    photos.show();  
    if (filter != '') photos.not('[class*="'+filter+'"]').hide();    
}
    InformationsquelleAutor yscik
  2. 4

    Verwenden Sie die jQuery - .filter() Methode statt .find():

    function filter() {
    var filter = $("#filter").val(),
        photos = $('.photo');  //don't forget to cache your selectors!

    photos.show();  

    if (filter != '') 
        photos.filter('.'+filter).hide();    
}

    Wenn Sie möchten, um Elemente anzuzeigen, die basierend auf diesen filter, nur die swap-Orte der .hide() und .show() im code, so dass alle Fotos sind versteckt und dann gefiltert diejenigen angezeigt werden (anstatt alle Fotos angezeigt und gefiltert werden diejenigen ausgeblendet).

    InformationsquelleAutor Andy E
  3. 4

    diese Weise, die Sie filtern Klassen, wenn Sie filtern möchten, die text, den Sie dies tun 

    $(".photo").hide();
$(".photo:contains("+filter+")").show();
    InformationsquelleAutor Slim Fadi
  4. 0

    Eigentlich, wenn Sie wollen, um zu zeigen, diejenigen, die genannt sind mit dem filter-Wert, den Sie verwenden möchten .not() statt .filter()

    function filter() {
    var filter = $("#filter").val();
    $('.photo').show();  
    if (filter != '') $('.photo').not('.'+filter).hide();    
}
    • Sie könnten auch halten filter() - und swap-rund um die hide() und show().
    InformationsquelleAutor Jo Albright
Schreibe einen Kommentar