Maison > Article > interface Web > Comment implémenter la fonction de filtrage dans jquery
Comment implémenter la fonction de filtrage dans jquery
- 藏色散人original
- 2021-11-22 11:06:033438parcourir
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.
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='class1'>
<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(){
$('#class1> button,#class2>button').off("click").on("click",function(){
$("#count button."+$(this).attr("data-belong")).appendTo("#"+$(this).attr("data-belong"));
$(this).appendTo("#count");
check()
})
$('#count button').off("click").on("click",function(){
$(this).appendTo("#"+$(this).attr("data-belong"))
check()
})
})()
</script>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('data-belong')).remove();
$(this).clone().appendTo("div.count");
$('.count button').off("click").on("click",function(){
$(this).remove();
})
})
</script>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!