JQUERY Définir la valeur pour tout type d'entrée dynamiquement

Ce plugin jQuery simplifie dynamiquement les valeurs de réglage pour divers types d'entrée. Il aborde le problème de la nécessité de différentes méthodes pour différents types d'entrée (texte, sélection, case, radio, etc.) en fournissant une seule fonction.

Le problème:

La définition dynamique des valeurs d'entrée de formulaire nécessite différentes approches en fonction du type d'entrée. Ce plugin vise à les consolider en une seule fonction réutilisable.

Solution:

Le plugin $.fn.field fournit un moyen unifié d'obtenir et de définir des valeurs pour tout type d'entrée dans un formulaire.

Utilisation:

Le plugin est utilisé en passant l'élément jQuery du formulaire, le nom d'entrée et la valeur. Par exemple:

$('#myForm').field('name', 'John Doe');     // Text input
$('#myForm').field('country', 'USA');      // Select
$('#myForm').field('newsletter', true);   // Checkbox
$('#myForm').field('gender', 'male');     // Radio button

Code complet:

(function () {
    $.fn.field = function (inputName, value) {
        if (typeof inputName !== "string") return false;
        const $inputElement = this.find(`[name="${inputName}"]`);

        if (typeof value === "undefined" && $inputElement.length >= 1) {
            switch ($inputElement.attr("type")) {
                case "checkbox":
                    return $inputElement.is(":checked");
                case "radio":
                    let result;
                    $inputElement.each(function () {
                        if ($(this).is(":checked")) result = $(this).val();
                    });
                    return result;
                default:
                    return $inputElement.val();
            }
        } else {
            switch ($inputElement.attr("type")) {
                case "checkbox":
                    $inputElement.prop("checked", value); // Use prop for boolean attributes
                    break;
                case "radio":
                    $inputElement.each(function () {
                        if ($(this).val() == value) $(this).prop("checked", true); // Use prop for boolean attributes
                    });
                    break;
                case undefined: // Handle cases where the element isn't an input
                    this.append(''); // Or handle appropriately for your use case
                    break;
                default:
                    $inputElement.val(value);
                    break;
            }
            return $inputElement;
        }
    };
})();

Améliorations:

• utilise des littéraux de modèle pour la concaténation des cordes plus propre.
• utilise .prop("checked") au lieu de .attr("checked") pour définir les valeurs de la case à cocher et de la radio, qui est l'approche recommandée pour les attributs booléens.
• comprend un case undefined pour gérer les situations où l'élément peut ne pas être un type d'entrée standard. L'implémentation actuelle ajoute une chaîne vide; Considérez une gestion des erreurs plus robuste ou une action alternative.

Ce plugin révisé offre une solution plus concise et efficace pour gérer dynamiquement les valeurs de champ de saisie dans jQuery. N'oubliez pas d'inclure jQuery dans votre projet avant d'utiliser ce plugin.

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!