Comment implémenter la fonction de filtrage dans jquery-js tutoriel-php.cn

Comment implémenter la fonction de filtrage dans jquery

藏色散人

Libérer： 2021-11-22 11:06:03

original

3466 Les gens l'ont consulté

Comment implémenter la fonction de filtrage dans jquery : 1. Utilisez appendTo de jquery pour ajouter l'élément cliqué à la liste ; 2. Utilisez la fonction clone de jquery pour supprimer directement le contenu de la liste d'attributs.

Comment implémenter la fonction de filtrage dans jquery

L'environnement d'exploitation de cet article : système Windows 7, jquery3.2.1, ordinateur Dell G3.

Comment implémenter la fonction de filtrage dans jquery ?

jquery implémente la fonction de filtrage.

Filtrage des attributs de produit

Le filtrage des attributs de produit est une fonction très courante, généralement un seul attribut du même type peut être sélectionné. Par exemple, gamme de prix ou marque, afin de rendre le contenu sélectionné plus intuitif, les éléments de sélection sont généralement répertoriés et ont pour fonction de cliquer pour annuler la sélection et de cliquer pour remplacer le même type.

Deux implémentations complètes sont données ci-dessous.

Implémentation 1 :

Utilisez appendTo de jquery pour ajouter l'élément cliqué à l'élément de liste (en même temps, vérifiez si l'élément de liste a des éléments du même type, et remplacez-les s'il y en a, pour qu'il renvoie à la liste d'origine),

Cliquez sur l'élément dans l'élément de liste pour revenir au div d'origine. Ici, un attribut personnalisé est utilisé pour renvoyer le div d'origine.

Naturellement, cette implémentation présente certains problèmes. Puisque la classe du div est limitée à être la même que l'identifiant de l'élément parent, cette situation est très gênante

Et elle nécessite de relier tous les événements à chaque fois, une récursion. Il y a un manque d’efficacité

Regardons la deuxième idée, qui est plus simple et plus claire. L'efficacité sera plus élevée, et l'identifiant et la classe n'ont pas besoin d'être les mêmes, et il n'est pas nécessaire de relier plusieurs événements

<!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>

Copier après la connexion

Implémentation 2 :

Utilisez la fonction clone de jquery, afin que la liste d'origine ne soit pas doivent être modifiés, cliquez sur la liste d'attributs. Le contenu à l'intérieur doit seulement être supprimé directement, et l'identifiant et la classe n'ont pas besoin d'être cohérents.

Plus gratuitement. Le code est réduit, il n'y a pas de récursion, et il n'y a pas de problème de modification et de liaison des données. Il est bien plus optimisé que l'implémentation 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
    .class1,.class2{
        width: 100px;
        height: 40px;
        margin: 10px;
    }
    #count{
        background-color: sandybrown;
        width: 400px;
        height: 200px;
    }
    </style>
    <body>
        <div>
            <button class="class1" data-belong="class1">皮鞋</button>
            <button class="class1" data-belong="class1">凉鞋</button>
            <button class="class1" data-belong="class1">拖鞋</button>
        </div>
        <div>
            <button class="class2" data-belong="class2">手套</button>
            <button class="class2" data-belong="class2">皮手套</button>
            <button class="class2" data-belong="class2">毛手套</button>
        </div>
    <div class="count">
    </div>
    </body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//只需保持 button 的 class 标志 和data-belong  一致即可。
    $("div:lt(2) button").click(function(){
        $("div.count ."+$(this).attr(&#39;data-belong&#39;)).remove();
        $(this).clone().appendTo("div.count");
        $(&#39;.count button&#39;).off("click").on("click",function(){
            $(this).remove();
    })
    })
</script>

Copier après la connexion

Apprentissage recommandé : "Tutoriel vidéo jquery"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!