JQuery implémente la boîte de sélection déroulante personnalisée avec image: Traitement des événements indépendants et optimisation de plusieurs instances

Cet article détaille comment utiliser jQuery pour créer une boîte de sélection déroulante personnalisée avec des options d'image et se concentre sur la résolution des conflits d'événements possibles et des problèmes de confusion de contenu que plusieurs composants de ces coexistons sur la page. En optimisant la logique du sélecteur DOM et du traitement des événements, assurez-vous que chaque boîte déroulante peut répondre indépendamment aux opérations utilisateur, tout en fournissant une fonction de clic externe pour améliorer l'expérience utilisateur et la robustesse des composants.

Introduction: exigences et défis des boîtes déroulantes personnalisées

Dans le développement Web moderne, les éléments HTML natifs ont des fonctionnalités limitées et ne peuvent pas prendre directement en charge des images d'intégration ou un autre contenu texte riche en options. Pour implémenter des boîtes de sélection déroulantes avec des images ou des dispositions plus complexes, les développeurs utilisent généralement des méthodes personnalisées pour simuler leur comportement à l'aide d'éléments tels que , ,

et
• . Cependant, lorsqu'il existe plusieurs instances de boîtes déroulantes de ce type dans la page, si les événements et les opérations DOM ne sont pas traités correctement, toutes les boîtes déroulantes sont facilement ouvertes en même temps, déroutant de contenu ou des réponses d'événements inexactes. Ce tutoriel plongera dans la façon de créer de tels composants à l'aide de jQuery et de se concentrer sur la résolution du problème d'indépendance entre plusieurs instances.

Structure HTML de base

Pour implémenter une boîte déroulante personnalisée avec des images, nous avons besoin d'un conteneur de wrapper pour distinguer chaque instance de composant individuel. Ici, nous utilisons la classe .box comme conteneur de niveau supérieur pour chaque boîte de sélection personnalisée et les identifie davantage par un ID unique (comme un, deux). Chaque. Box contient un élément caché nativement (utilisé pour stocker des données et des valeurs brutes), ainsi qu'une structure de boîte déroulante personnalisée simulée composée d'un bouton (.BTn-Select) et d'un div (.b et de son UL interne # A).

 <script src="https://code.jquery.com/jquery-3.6.0.min.js" int xuj m4=" crosorigin = " anonymme> 

<! - La première instance de boîte déroulante personnalisée ->
<div class = "box" id = "one">
  <sélectionnez class = "Vodiapicker">
    <option> en sélectionnez un 
    <option value = "en" class = "test" data-thumbnail = "images / 3.png">
      Anglais
    
    <option value = "Au" data-thumbnail = "images / 3.png"> Engllish (Au) 
  

  <div class = "Lang-Select">
    <Button class = "btn-select" value = ""> </ bouton>
    <div class = "b">
      <ul id = "a"> 
    
  


<! - La deuxième instance de boîte déroulante personnalisée ->
<div class = "box" id = "deux">
  <sélectionnez class = "Vodiapicker">
    <option> en sélectionnez un 
    <option value = "fr" class = "test" data-thumbnail = "images / 3.png">
      Français
    
    <Option Value = "CA" Data-Thumbnail = "Images / 3.png"> French (CA) 
  

  <div class = "Lang-Select">
    <Button class = "btn-select" value = ""> </ bouton>
    <div class = "b">
      <ul id = "a"> 
    
  
</script>

Remarque: Bien que l'utilisation d'id = "a" inside div.box avec $ (this) .find ("# a") peut fonctionner, à partir de la spécification HTML et des meilleures pratiques, les ID doivent être uniques dans le document. Si plusieurs éléments nécessitent la même identité pour appliquer des styles ou des comportements, la classe (class = "a") doit être utilisée en premier. Dans la solution de ce didacticiel, puisque la méthode find () de jQuery limite la portée de la recherche, elle fonctionne correctement même si l'ID est dupliquée, mais il est recommandé d'éviter les ID en double dans les projets réels.

Définition du style CSS

CSS est chargé de cacher les éléments natifs et d'embellir le bouton et la liste des options des boîtes déroulantes personnalisées.

 .VodiaPicker {
  Affichage: aucun; / * Masquer l'élément de sélection natif * /
}

#un {
  padding-left: 0px;
}

#A img,
.btn-sélection Img {
  Largeur: 18px; / * Taille de l'image dans les options et les boutons * /
}

#a li {
  Style de liste: aucun;
  Tableau de rembourrage: 5px;
  Padding-Bottom: 5px;
}

#A li: Hover {
  Color d'arrière-plan: # F4F3F3; / * Effet de survol de l'option * /
}

#a li img {
  marge: 5px;
}

#a li span,
.btn-select li Span {
  marge-gauche: 30px;
}


/ * Conteneur de liste d'options * /
.b {
  Affichage: aucun; / * Masquer par défaut * /
  Largeur: 100%;
  largeur maximale: 350px;
  Box-shadow: 0 6px 12px RGBA (0, 0, 0, 0,175);
  Border: 1px RGBA solide (0, 0, 0, 0,15);
  Border-Radius: 5px;
  Position: absolue; / * Faire flotter la liste déroulante au-dessus des autres contenus * /
  Color d'arrière-plan: #FFF; / * Couleur d'arrière-plan * /
  Z-Index: 1000; / * Assurez-vous d'être au niveau supérieur * /
}

/ * Style bouton * /
.btn-Select {
  marge: 10px;
  Largeur: 100%;
  largeur maximale: 350px;
  hauteur: 34px;
  Border-Radius: 5px;
  Color d'arrière-plan: #FFF;
  Border: 1px solide #ccc;
  Texte-aligne: gauche; / * Le contenu du bouton est laissé aligné * /
  curseur: pointeur; / * style de pointeur de souris * /
}

.btn-select li {
  Style de liste: aucun;
  flottant: à gauche;
  Padding-Bottom: 0px;
}

.btn-Select: Hover li {
  marge-gauche: 0px;
}

.btn-Select: Hover {
  Color d'arrière-plan: # F4F3F3;
  Border: 1px solide transparent;
  Box-shadow: inset 0 0px 0px 1px #ccc;
}

.BTN-SELECT: Focus {
  Aperçu: aucun;
}

.lang-Select {
  marge-gauche: 50px;
  Position: relative; / * Assurez-vous que .b est absolument positionné par rapport à celui-ci * /
}

Remarque: Pour s'assurer que la liste déroulante (.B) flotte correctement et écrase un autre contenu, il est nécessaire d'ajouter la position: absolue; et z-index à lui. En même temps, son élément parent .Lang-Select doit définir la position: relative;.

JQuery Logic: implémenter un traitement d'événements indépendant

La clé consiste à utiliser les sélecteurs de traversée et de contexte de JQuery (tels que $ (this) et parents (), find ()) pour s'assurer que toutes les opérations sont limitées aux instances de composant en cours de traitement.

 $ (function () {
  // 1. Initialiser chaque boîte déroulante personnalisée $ (". Box"). Chaque (fonction () {
    Soit Langarray = []; // Créer un langarray indépendant pour chaque instance de boîte
    // Traversé l'option Native Sélectionnez dans la boîte actuelle et créez un élément de liste personnalisé $ (this)
      .find (". Option Vodiapicker")
      .each (function () {
        Soit img = $ (this) .attr ("data-thumbnail");
        Soit Text = this.innerText;
        Soit Value = $ (this) .val ();
        Soit un élément =
          '

' texte "

"; Langarray.push (article); }); // remplit l'élément de liste construit dans l'ul # A $ (this). // Utilisez la jointure ('') pour éviter plusieurs opérations DOM // définissez le contenu d'affichage initial du bouton sur la première option $ (this) .find (". Btn-Select"). Html (Langarray [0]); // En supposant que la valeur de la première option est «en», vous pouvez définir dynamiquement $ (this) .find (». Btn-select»). Att ("Value", $ (this) .find (". Vodiapicker Option: Eq (1)"). Val ()); }); // 2. Global Click Gestion des événements: Fermez toutes les cases déroulantes ouvrir lorsque vous cliquez en dehors du composant $ (document) .click (fonction (événement) { // Vérifiez si la cible de clic est un bouton .btn-sélection // Si la cible de clic n'est dans aucune zone .lang-sélectionneuse, fermez toutes les boîtes déroulantes ouvertes $ (". Box"). Chaque (fonction () { if ($ (this) .find (". b"). est (': visible')) { $ (this) .find (". b"). toggle (); } }); } }); // 3. Élément de liste Cliquez sur Traitement de l'événement: sélectionnez une option $ ("li"). Cliquez sur (fonction () { Soit img = $ (this) .find ("img"). attr ("src"); Selt Value = $ (this) .find ("img"). att ("value"); Selt Text = $ (this) .find ("span"). text (); // obtient le texte dans la travée let élément = '

' texte "

"; // Trouvez le bouton et la liste Container pour la boîte déroulante personnalisée dans laquelle appartient le libell en clic actuellement // Utiliser les parents ("div.lang-select") pour trouver le parent le plus proche. $ (this) .parents ("div.lang-select"). find (". btn-select"). html (item); $ (this) .parents ("div.lang-select"). find (". btn-select"). attr ("valeur", valeur); $ (this) .parents ("div.lang-select"). find (". b"). toggle (); // ferme la boîte déroulante actuelle}); // 4. Button cliquer Gestion des événements: ouvrir / fermer la boîte déroulante actuelle et fermer les autres boîtes déroulantes ouvertes $ (". BTN-Select"). Cliquez sur (fonction (événement) { event.stoppropagation (); // Empêche les événements de bouillonner dans le document, empêchant les clics globaux de déclencher immédiatement const currentbox = $ (this) .closest (". Box"); // Obtenez la boîte. Box sur laquelle appartient le bouton Click actuel. // Fermez toutes les cases déroulantes ouvertes dans toutes les autres cases $ (". Box"). Non (CurrentBox) .Each (function () { $ (this) .find (". b"). hide (); }); // bascule la boîte déroulante de la zone actuelle pour afficher l'état de CurrentBox.find (". B"). Toggle (); }); });

Analyse de code et optimisation:

1. Initialiser ($ (". Box"). Chacun (...)) :

   • Utilisez $ (". Box"). Chaque () pour itérer dans chaque conteneur déroulant personnalisé individuel.
   • Dans chaque itération, $ (ceci) pointe vers l'élément .box actuel, garantissant que toutes les opérations de recherche () sont effectuées dans le cadre de la boîte .box actuelle, évitant ainsi la confusion de contenu entre différentes instances.
   • Langarray est redéclaré comme Langarray = []; Dans chaque boucle, garantissant que chaque. Box a son propre tableau indépendant d'options et ne s'affertera pas mutuellement.
   • Langarray.join ('') est utilisé pour épisser les éléments du tableau dans une chaîne, puis le définir sur le DOM en même temps, ce qui est plus efficace que d'appeler HTML () ou APPEND () plusieurs fois dans une boucle.
   • La valeur initiale et les paramètres de texte du bouton sont également assurés pour l'instance actuelle via $ (this) .find ().

2. Événement de clic global ($ (document) .click (...)) :

   • Cet écouteur d'événements est utilisé pour implémenter la fonction de "Fermer la case déroulante lors de la cliquetis sur la zone externe du composant".
   • ! $ (event.target) .Closest (". Lang-Select"). Longueur détermine si la source de l'événement de clic est en dehors de n'importe quelle zone .lang-sélectionneuse (c'est-à-dire le bouton ou la liste de la boîte déroulante personnalisée).
   • Si vous cliquez à l'extérieur, parcourez toutes les boîtes. Boîtes, trouvez toutes les listes déroulantes visibles (.B) et fermez-les.

3. Élément de liste Cliquez sur l'événement ($ ("li"). Cliquez sur (...)) :

   • Lorsque l'utilisateur clique sur une option (
   • ), le contenu d'affichage et la valeur du bouton correspondant doivent être mis à jour et la liste déroulante est fermée.
   • $ (this) .parents ("div.lang-select") est la clé ici. Il commence par l'élément
   • cliqué et regarde vers le haut pour l'élément parent Div.lang-Select le plus proche, déterminant ainsi la boîte déroulante personnalisée. De cette façon, même s'il y a plusieurs éléments
   • sur la page, le composant auquel il appartient peut être trouvé avec précision.
   • Rechercher (". BTN-Select") et trouver (". B") puis trouver les boutons et les conteneurs de liste correspondants dans la plage de div.lang-sélectionner pour le fonctionnement.

4. Button cliquez sur l'événement ($ (". BTN-Select"). Cliquez sur (...)) :

   • Lorsque l'utilisateur clique sur le bouton dans la zone déroulante personnalisée, l'état d'affichage de sa liste déroulante doit être commuté.
   • event.stoppropagation (); est une étape cruciale, ce qui empêche les événements de clic de bouillonner vers le haut vers le document. Si cette ligne n'est pas disponible, après avoir cliqué sur le bouton pour ouvrir la boîte déroulante, $ (document) .click tirera immédiatement et le fermera à nouveau.
   • const CurrentBox = $ (this) .closest (". Box"); Obtient le conteneur .box auquel le bouton est actuellement cliqué.
   • $ (". Box"). Not (currentBox) .Each (function () {...}); Iterate sur tous les éléments de la boîte à l'exception de la boîte actuelle et ferme la liste déroulante (.B). Cette méthode est plus générale et plus extensible que id codé en dur = "un" ou id = "deux".
   • Enfin, currentbox.find (". B"). Toggle (); basculer(); Bascule l'état d'affichage de la boîte déroulante actuellement cliquée.

Résumé et optimisation supplémentaire

Grâce à la structure HTML ci-dessus, aux scripts de style CSS et jQuery, nous avons réussi à construire avec succès une boîte de sélection de déconnexion personnalisée avec des options d'image, et avons résolu le problème des conflits d'événements et de la confusion de contenu lorsque plusieurs instances coexistent. La clé est:

• Sélecteur localisé: utilisez toujours des méthodes telles que $ (this), find (), le plus proche () et les parents () pour limiter les opérations jQuery à la plage DOM du composant actuel.
• Contrôle des bulles d'événements: utilisez l'événement.stoppropagation () pour empêcher les événements mondiaux inutiles de déclencher.
• Logique de clôture générale: il utilise la méthode de traversée de tous les composants et de l'exclusion des composants actuels pour fermer automatiquement d'autres boîtes déroulantes au lieu d'ID spécifiques à code dur.

Suggestions d'optimisation supplémentaires:

• Accessibilité: pour les composants personnalisés, la navigation par clavier (touches d'onglet, les touches fléchées) et la prise en charge du lecteur d'écran doivent être prises en compte. Cela implique généralement de ajouter des propriétés Aria (comme Aria-Haspopup, Aria-Expanded, Aria-LarredBy) et une écoute supplémentaire d'événements de clavier.
• Optimisation de chargement d'image: si le nombre d'images est grand, vous pouvez considérer la technologie de chargement paresseuse de l'image pour améliorer les performances de la page.
• Image d'arrière-plan CSS: Comme mentionné dans la réponse, vous pouvez définir l'image comme l'image d'arrière-plan du bouton au lieu d'incorporer directement la balise , ce qui peut éviter que l'élément d'image lui-même de bloquer l'événement de clic du bouton et de fournir une plus grande flexibilité de style.
• Componentiisation: Pour des applications plus complexes, envisagez d'encapsulant cette fonctionnalité dans un plug-in jQuery réutilisable ou une classe JavaScript native pour améliorer la modularité et la maintenabilité du code.
• Gestion de l'État: si vous avez besoin de persister la valeur sélectionnée, vous pouvez réintroduire le storage local ou d'autres mécanismes de stockage des clients. Lisez la valeur stockée à l'initialisation et définissez l'état initial de la boîte déroulante en conséquence.

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!