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

-Tag oder ein Element vom Typ „text“ mit einem -Tag sein.

Eingabefeld hinzufügen

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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn