JQuery setzen Wert für jede Art von Eingabe dynamisch

Dieses JQuery -Plugin vereinfacht die Einstellungswerte für verschiedene Eingangstypen dynamisch. Es befasst sich mit dem Problem, verschiedene Methoden für verschiedene Eingabetypen (Text, Auswahl, Kontrollkästchen, Radio usw.) zu benötigen, indem eine einzelne Funktion bereitgestellt wird.

Das Problem:

dynamisch Einstellungsformular -Eingabewerte erfordert je nach Eingangstyp unterschiedliche Ansätze. Dieses Plugin zielt darauf ab, diese in eine einzelne, wiederverwendbare Funktion zu konsolidieren.

Lösung:

Das Plugin $.fn.field bietet eine einheitliche Möglichkeit, Werte für jeden Eingangstyp in einem Formular zu erhalten.

Verwendung:

Das Plugin wird verwendet, indem das JQuery -Element des Formulars, den Eingangsnamen und den Wert übergeben wird. Zum Beispiel:

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

Voller Code:

(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;
        }
    };
})();

Verbesserungen:

verwendet Vorlagenliterale für die Reinigung der saubereren Zeichenfolge.
verwendet
• anstelle von .prop("checked") zum Einstellen von Kontrollkästchen und Optionsschaltflächen. Dies ist der empfohlene Ansatz für boolesche Attribute. .attr("checked")
enthält ein
• , um Situationen zu verarbeiten, in denen das Element möglicherweise kein Standardeingangstyp ist. Die aktuelle Implementierung findet eine leere Zeichenfolge an. Betrachten Sie eine robustere Fehlerbehandlung oder alternative Aktion. case undefined

Dieses überarbeitete Plugin bietet eine prägnantere und effizientere Lösung für die dynamische Verwaltung von Eingangsfeldwerten in JQuery. Denken Sie daran, JQuery in Ihr Projekt aufzunehmen, bevor Sie dieses Plugin verwenden.

Das obige ist der detaillierte Inhalt vonJQuery setzen Wert für jede Art von Eingabe dynamisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!