Tutoriel JavaScript pour synchroniser les valeurs de curseur avec le texte d'affichage

Points clés:

• form.filterform: l'intégralité du formulaire de filtre.
• .Slide: le conteneur pour chaque composant de curseur.
• TAG: utilisé pour afficher les valeurs minimales et maximales du curseur, ce sont les cibles dont nous avons besoin pour mettre à jour dynamiquement.
• input.bt-slider: il s'agit d'une boîte d'entrée de texte masquée contrôlée par la bibliothèque de curseur, dont l'attribut de valeur reflète la plage actuellement sélectionnée du curseur en temps réel (par exemple, "1 4721"). C'est la source où nous obtenons la valeur actuelle du curseur.

3. Solution JavaScript

Pour atteindre la synchronisation numérique et la soumission de formulaire, nous utiliserons JavaScript pour écouter les modifications d'attribut de valeur de l'élément input.bt-slider et mettre à jour le contenu texte de la balise en conséquence. Dans le même temps, ajoutez des écouteurs d'événements à la poignée du curseur et à d'autres éléments d'entrée associés pour déclencher automatiquement la soumission du formulaire après l'action de l'utilisateur.

 let filterForm = document.QuerySelector ("form.filterform");

if (null! == filterform) {
    // Utilisez setInterval pour attendre que l'élément de curseur soit entièrement chargé et initialisé Let Waits = setInterval (Wait_Sliders, 200);

    function wait_sliders () {
        // Vérifiez si la poignée du curseur existe et confirmez que le curseur a été rendu si (null! == filterForm.QuerySelector (". Slider-Handle")) {

            // 1. Écoutez les modifications de la valeur du curseur et mettez à jour l'affichage Let Slides = filterForm.QuerySelectorAll ('. Slide');
            // Créez une instance MutationObserver pour observer les changements dans les propriétés DOM Var Observer = New MutationObserver (fonction (mutations) {
                mutations.ForEach (fonction (mutation) {
                    // Assurez-vous qu'il s'agit d'un changement de type d'attributs et que l'objectif est entrée.bt-slider
                    if (mutation.type === "Attributs" && mutation.attributeName === "Value") {
                        Soit Values ​​= mutation.target.value.split (','); // obtient la valeur actuelle du curseur (par exemple "1 4721") et Split Let Spans = mutation.target.closest ('. Slide'). QueySelectorall ('span'); // Trouvez toutes les balises de portée dans le conteneur de curseur actuel // Mette à jour le texte de la première portée (minimum) et la dernière portée (maximum) if (Spans.Length> 0) {
                            SPANS [0] .InnerText = valeurs [0]; // Mette à jour la valeur minimale}
                        if (spans.length> 1) {// Assurez-vous qu'il y a une deuxième portée
                            Spans [Spans.length - 1] .InnerText = valeurs [1]; // Mette à jour la valeur maximale}
                    }
                });
            });

            // Enregistrer MutationObserver pour la boîte d'entrée cachée (input.bt-slider) de chaque curseur
            Slides.ForEach (Slide => {
                Soit El = Slide.QuerySelector ('. Bt-Slider');
                if (el) {
                    // observer les modifications des attributs de l'entrée.bt-slider element observer.observe (el, {attributs: true});
                }
            });

            // 2. Ajoutez un écouteur d'événements pour l'opération de curseur pour déclencher le formulaire FilterForm.QuerySelectorAll ("Input, Select, .Slider-Handle"). ForEach ((E) => {
                // Sélectionnez l'événement approprié en fonction du type d'élément: la poignée du curseur écoute MouseUp / TouchenD, et d'autres boîtes d'entrée écoutent le changement
                Laissez event = e.classList.Contains ("Slider-Handle")? ["MouseUp", "Touchend"]: ["Change"];
                pour (soit i = 0; i <event.length i e.addeventlistener> {
                        // déclenchent le bouton Soumettre du formulaire cliquez sur FilterForm.QuerySelector ('bouton [type = "soumettre"]'). Cliquez sur ();
                    });
                }
            });

            // 3. Déclencher une soumission de formulaire lors de l'initialisation pour s'assurer que l'état initial est correct (si nécessaire)
            filterForm.QuerySelector ('bouton [type = "soumettre"]'). Cliquez sur ();

            // effacer le temporisateur d'attente car le curseur a trouvé et traité ClearInterval (Waits);
        }
    }
}</event.length>

4. Explication du code détaillé et précautions

4.1 Attendez que le curseur se charge (setterval et wait_sliders)

Étant donné que le composant du curseur peut prendre le temps de charger dynamiquement ou d'initialiser, interroger l'élément DOM directement pendant le chargement de la page peut échouer. setInterval (wait_sliders, 200) crée un minuteur qui exécute la fonction wait_sliders toutes les 200 millisecondes. La fonction Wait_Sliders vérifie si filterForm.QuerySelector (". Slider-Handle") renvoie une valeur non nul, déterminant ainsi si le curseur a été complètement rendu dans le DOM. Une fois la poignée du curseur trouvée, la logique suivante est exécutée et la minuterie est arrêtée à l'aide de ClearInterval (Wits) pour éviter une consommation de ressources inutile.

4.2 Mise à jour en temps réel des valeurs affichées (MutationObserver)

• MutationObserver : C'est le cœur de la solution. Il nous permet d'écouter des changements dans l'arbre Dom, y compris des changements dans les attributs de l'élément. Ici, nous créons une instance MutationObserver et la configurons pour observer les modifications des attributs dans l'élément d'entrée.bt-slider.
• Observer.Observe (el, {attributs: true}); Cette ligne de code indique à l'observateur que lorsqu'un attribut d'El (c'est-à-dire input.bt-slider) change, la fonction de rappel sera déclenchée.
• Logique de la fonction de rappel :
  • Mutations.ForEach (...): Traverse tous les changements qui se produisent.
  • mutation.type === "Attributs" && mutation.attributeName === "Value": assurez-vous que nous ne gérons que les modifications de l'attribut de valeur.
  • mutation.target.value.split (','): mutation.target pointe vers l'élément de modification de l'entrée.bt-slider. Son attribut de valeur contient une chaîne de forme comme "1 4721". En divisant, vous pouvez obtenir les valeurs minimales et maximales.
  • mutation.target.closest ('. Slide'). queySelectorall ('span'): le plus rapproché ('. Slide') Recherchez l'élément parent .slide le plus proche, et queySelectorall ('span') trouve tous les éléments à l'intérieur de cet élément parent. Cela garantit que nous mettons à jour la valeur affichée correspondant au curseur actuel, plutôt que les valeurs des autres curseurs sur la page.
  • SPANS [0] .InnerText = valeurs [0]; et Spans [Spans.length - 1] .InnerText = valeurs [1];: met à jour le contenu texte des premiers et derniers éléments à synchroniser avec la valeur actuelle du curseur.

4.3 Soumission de formulaire de déclenchement

• Sélection du type d'événement :
  • Pour la poignée du curseur (. En effet, ces événements sont déclenchés lorsque l'utilisateur termine l'opération de traînée, plutôt que fréquemment pendant la traînée.
  • Pour les autres boîtes d'entrée et sélectionnez des cases, nous écoutons les événements de changement, qui se déclenche lorsque l'utilisateur modifie la valeur et perd la mise au point.
• filterForm.QuerySelector ('bouton [type = "soumettre"]'). Cliquez sur (); : Après avoir détecté une action utilisateur, simulez en cliquant sur le bouton Soumettre du formulaire. Cela déclenche le comportement de validation par défaut du formulaire (si data-ajax = "true", il peut être soumis via AJAX).
• Commit initial : filterForm.QuerySelector ('bouton [type = "soumettre"]'). Cliquez sur (); Exécute une fois immédiatement lorsque le script est initialisé pour s'assurer qu'après le chargement de la page, le filtre peut immédiatement appliquer l'affichage de filtrage ou de mise à jour en fonction de la valeur initiale.

5. Résumé

En combinant MutationObserver pour écouter les modifications des attributs de valeur des champs d'entrée masqués et en ajoutant des auditeurs d'événements appropriés aux éléments d'interaction de l'utilisateur, nous synchronisons avec succès l'affichage de la valeur du curseur avec la valeur réelle et déclenchez automatiquement la soumission du formulaire une fois l'utilisateur terminé l'opération. Cette approche offre une expérience utilisateur robuste et réactive et est une stratégie efficace pour gérer les composants de l'interface utilisateur dynamique. Dans les applications pratiques, assurez-vous que votre bibliothèque de curseur met à jour correctement l'attribut de valeur de l'élément d'entrée caché, qui est la condition préalable à ce que cette solution prenne effet.