jquery fügt mehrere Eingaben hinzu

In der Frontend-Entwicklung kann jQuery verwendet werden, um die Funktion des dynamischen Hinzufügens von Eingabefeldern einfach zu implementieren. Diese Funktion ist sehr nützlich, wenn Benutzer mehrere Inhalte eingeben müssen. Sie kann unsere Anwendung flexibler machen, den Benutzeranforderungen gerecht werden und das Benutzererlebnis verbessern. Im Folgenden werde ich vorstellen, wie Sie mit jQuery mehrere Eingabefelder hinzufügen.

Grundidee

Unser Ziel ist es, mehrere Eingabefelder dynamisch hinzuzufügen, daher müssen wir zunächst eine Grundidee festlegen. Wir fügen der Seite eine Schaltfläche hinzu. Wenn der Benutzer auf die Schaltfläche klickt, wird dynamisch ein neues Eingabefeld generiert. Darüber hinaus müssen wir auch einige Eigenschaften und Stile des Eingabefelds definieren.

Schritt 1: HTML-Teil

Fügen Sie zunächst eine Schaltfläche und einen Container hinzu, um das neue Eingabefeld im HTML-Code aufzunehmen. Der Container kann ein dc6dce4a544fdca2df29d5ac0ea9906b-Tag oder ein Element vom Typ „text“ mit einem d5fd7aea971a85678ba271703566ebfd-Tag sein.

0f72cbf6a93e8f9615a6d8d8c8ff7efdEingabefeld hinzufügen65281c5ac262bf6d81768915a4a77ac0
116f2b872f57782f800a99b06420b14116b28748ea4df4d9c2150843fecfba68

Wie Sie sehen können, geben wir den Button und Die Container definieren jeweils eine ID, die im nachfolgenden JavaScript-Code verwendet wird.

Schritt 2: CSS-Teil

Da wir Eingabefelder dynamisch hinzufügen müssen, müssen wir einige Stile und Attribute für das neue Eingabefeld definieren, damit es wie andere Eingabefelder aussieht.

input-container input {

margin-bottom: 10px;
display: block;
}

Hier definieren wir einen Stil und legen einen unteren Rand und ein Anzeigeattribut auf Blockebene für das neue Eingabefeld fest.

Schritt 3: jQuery-Codeteil

Jetzt können wir jQuery-Code schreiben, um die Funktion des dynamischen Hinzufügens eines neuen Eingabefelds zu implementieren.

$(document).ready(function() {
$("#add-input").click(function() {

$("#input-container").append('<input type="text" name="input[]" />');

});
});

Zuerst verwenden wir document.ready Ereignis, um sicherzustellen, dass der Code ausgeführt wird, nachdem die Seite geladen wurde. Anschließend definieren wir ein Klickereignis für die Schaltfläche, das beim Klicken auf die Schaltfläche ein neues Eingabefeld zum Container hinzufügt. Hier verwenden wir die append()-Methode von jQuery, um mithilfe der HTML-Syntax ein neues Eingabefeld zum Container hinzuzufügen.

Darüber hinaus legen wir auch einen Namen für das neue Eingabefeld als „input[]“ fest, was uns die Verarbeitung im Hintergrund-PHP-Code erleichtert.

Zuletzt fügen wir noch etwas Code hinzu, um das neu hinzugefügte Eingabefeld zu entfernen:

$(document).on('click', '.remove-input', function() {
$(this). parent() .remove();
});

Dieser Code definiert ein Klickereignis für jedes Eingabefeld, das wir hinzufügen, und wenn der Benutzer auf die Schaltfläche „Löschen“ klickt, wird das Eingabefeld entfernt.

Zusammenfassung

In diesem Artikel verwenden wir jQuery, um die Funktion des dynamischen Hinzufügens mehrerer Eingabefelder zu vervollständigen. jQuery ist ein sehr leistungsfähiges Tool, mit dem wir verschiedene Interaktionen einfacher erreichen und die Benutzererfahrung verbessern können. Durch Ändern des Codes in diesem Artikel können Sie ihn für Ihre eigene Anwendung besser geeignet machen.

Das obige ist der detaillierte Inhalt vonjquery fügt mehrere Eingaben hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!