So implementieren Sie eine Filterfunktion in jquery-js-Tutorial-php.cn

So implementieren Sie eine Filterfunktion in jquery

藏色散人

Freigeben： 2021-11-22 11:06:03

Original

3459 Leute haben es durchsucht

So implementieren Sie die Filterfunktion in jquery: 1. Verwenden Sie appendTo von jquery, um das angeklickte Element zur Liste hinzuzufügen. 2. Verwenden Sie die Klonfunktion von jquery, um den Inhalt in der Attributliste direkt zu entfernen.

So implementieren Sie eine Filterfunktion in jquery

Die Betriebsumgebung dieses Artikels: Windows 7-System, jquery3.2.1, Dell G3-Computer.

Wie implementiert man eine Filterfunktion in jquery?

jquery implementiert eine Filterfunktion.

Filterung von Produktattributen

Die Filterung von Produktattributen ist eine sehr häufige Funktion. Normalerweise kann nur ein Attribut desselben Typs ausgewählt werden. B. Preisspanne oder Marke: Um den ausgewählten Inhalt intuitiver erscheinen zu lassen, werden die Auswahlelemente im Allgemeinen aufgelistet und haben die Funktion, durch Klicken die Auswahl abzubrechen und durch Klicken den gleichen Typ zu ersetzen.

Zwei vollständige Implementierungen sind unten aufgeführt.

Implementierung 1:

Verwenden Sie appendTo von jquery, um das angeklickte Element zum Listenelement hinzuzufügen (überprüfen Sie gleichzeitig, ob das Listenelement Elemente desselben Typs enthält, und ersetzen Sie diese gegebenenfalls, damit es zurückgegeben wird zur ursprünglichen Liste),

Klicken Sie auf das Element im Listenelement, um zum ursprünglichen Div zurückzukehren. Hier wird ein benutzerdefiniertes Attribut verwendet, um das ursprüngliche Div zurückzugeben.

Natürlich weist diese Implementierung bestimmte Probleme auf. Da die Klasse des Divs auf die gleiche ID des übergeordneten Elements beschränkt ist, ist diese Situation sehr unpraktisch.

Und es erfordert jedes Mal eine erneute Bindung aller Ereignisse. Es mangelt an Effizienz.

Schauen wir uns die zweite Idee an, die einfacher und klarer ist. Die Effizienz wird höher sein, und die ID und die Klasse müssen nicht identisch sein, und es ist nicht erforderlich, mehrere Ereignisse erneut zu binden Wenn Sie Änderungen vornehmen müssen, klicken Sie auf die Attributliste. Der darin enthaltene Inhalt muss nur direkt entfernt werden, und die ID und die Klasse müssen nicht konsistent sein.

Mehr kostenlos. Der Code ist reduziert, es gibt keine Rekursion und es gibt kein Problem mit der Datenänderung und -bindung. Er ist viel optimierter als Implementierung 1

<!DOCTYPE html>
<html>
<head>
  <title>动画</title>
  <style type="text/css">
    .class1,.class2{
        width: 100px;
        height: 40px;
        margin: 10px;
    }
    #count{
        background-color: sandybrown;
        width: 400px;
        height: 200px;
    }
  </style>
</head>
<body>
<div id=&#39;class1&#39;>
    <button class="class1" data-belong="class1">皮鞋</button>
    <button class="class1" data-belong="class1">凉鞋</button>
    <button class="class1" data-belong="class1">拖鞋</button>
</div>
<div id="class2">
    <button class="class2" data-belong="class2">手套</button>
    <button class="class2" data-belong="class2">皮手套</button>
    <button class="class2" data-belong="class2">毛手套</button>
</div>
<div id="count"></div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
(function check(){
    $(&#39;#class1> button,#class2>button&#39;).off("click").on("click",function(){
        $("#count button."+$(this).attr("data-belong")).appendTo("#"+$(this).attr("data-belong"));
        $(this).appendTo("#count");
        check()
})
    $(&#39;#count  button&#39;).off("click").on("click",function(){
        $(this).appendTo("#"+$(this).attr("data-belong"))
        check()
    })
})()
</script>

Nach dem Login kopieren

Empfohlenes Lernen: „

jquery-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Filterfunktion in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!