So schreiben Sie ein Filterfeld in JQuery

JQuery ist eine leistungsstarke Javascript-Bibliothek, die problemlos HTML-Dokumente bedienen kann und so Dokumentvorgänge und Ereignisverarbeitung vereinfacht. In diesem Artikel erfahren Sie, wie Sie mit JQuery Filterfelder erstellen, was eine sehr praktische Fähigkeit sein wird. Bevor Sie beginnen, sollten Sie über Grundkenntnisse in JQuery verfügen.

1. HTML-Struktur erstellen

Zuerst müssen wir einen Container erstellen, der das Filterfeld in HTML enthält. Eine einfache HTML-Struktur kann mit dem folgenden Code erstellt werden, der ein SELECT-Element und eine Liste untergeordneter Elemente mit Optionen enthält: „Container“ Container. Im Container gibt es ein Select-Element mit der ID „filter-select“, das zur Auswahl von Filterbedingungen dient. Unten finden Sie eine ungeordnete Liste mit der ID „filter-list“, die einige Elemente enthält, die gefiltert werden.

Eine Filterfunktion schreiben

2. Als nächstes müssen wir eine Filterfunktion schreiben, die dafür verantwortlich ist, Benutzer basierend auf der Auswahl anzuzeigen oder auszublenden Filterbedingungen Elemente zum Filtern. Diese Funktionalität kann mit dem folgenden Code erreicht werden:

<div id="filter-container">
  <select id="filter-select">
    <option value="">所有</option>
    <option value="red">红色</option>
    <option value="blue">蓝色</option>
    <option value="green">绿色</option>
  </select>
  <ul id="filter-list">
    <li class="red">红色物品</li>
    <li class="blue">蓝色物品</li>
    <li class="green">绿色物品</li>
  </ul>
</div>

Im obigen Code haben wir eine Funktion namens Filter definiert. Diese Funktion ruft die ausgewählten Filterkriterien ab und blendet Elemente basierend auf den ausgewählten Kriterien ein oder aus. Zuerst verwenden wir einen JQuery-Selektor, um den Wert der Filterbedingung abzurufen und ihn in der ausgewählten Variablen zu speichern. Als nächstes verwenden wir eine if-Anweisung, um zu prüfen, ob die Bedingung ausgewählt ist. Wenn keine Auswahl vorhanden ist, werden alle Elemente mit der show-Methode von JQuery angezeigt. Wenn eine Bedingung ausgewählt ist, verwenden Sie die Methode „hide“, um alle Elemente auszublenden, verwenden Sie einen Filter, um Elemente zu filtern, die der Filterbedingung entsprechen, und verwenden Sie die Methode „show“, um diese Elemente anzuzeigen.

Reagieren auf Benutzerinteraktion

3. Jetzt müssen wir die Filterfunktion mit der Benutzerinteraktion verknüpfen. Sie können den folgenden Code verwenden, um die Filterfunktion mit dem Änderungsereignis im SELECT-Element zu verknüpfen: Eine Funktion mit dem Namen „Filter“ wird zugeordnet. Immer wenn der Benutzer die Filterkriterien ändert, wird die Filterfunktion aufgerufen.

Vollständiger Code

Hier ist das vollständige Codebeispiel zum Erstellen und Rendern einer Liste von Elementen mit einem Filterfeld:

4. function filter() {
     var selected = $("#filter-select").val(); // 获取选择的筛选条件
     if(selected == "") { // 如果没有选择
       $("#filter-list li").show(); // 显示所有元素
     } else { // 如果选择了条件
       $("#filter-list li").hide(); // 隐藏所有元素
       $("." + selected).show(); // 显示与条件匹配的元素
     }
   }

Das Obige ist ein Tutorial zur Verwendung von JQuery zum Erstellen einer Filterbox. Ich hoffe, es kann Ihnen helfen!

Das obige ist der detaillierte Inhalt vonSo schreiben Sie ein Filterfeld in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!