jQuery implementiert einen einfachen Kommentarbereich

In diesem Artikel wird der spezifische Code von jQuery zur Implementierung eines einfachen Kommentarbereichs zu Ihrer Information veröffentlicht. Der spezifische Inhalt ist wie folgt

1. Schauen wir uns zunächst die Wirkung an

①Klicken Sie auf „Veröffentlichen“.

②Klicken Sie auf „Kommentar löschen“

2. Wie man umsetzt

Zunächst verwenden wir HTML und CSS, um einen solchen Bereich zu schreiben:

HTML-Inhalt:

<div id="box">
 <div id="fabu">
 <textarea placeholder="Bitte geben Sie den Inhalt ein!!!" id="text"></textarea>
 </div>
 
 <button onclick="fun1()" id="btn_1">Veröffentlichen</button>
 
 <div id="pinlun"> </div>
</div>

① Schreiben wir zunächst eine große Schachtel, in die der gesamte Inhalt passt

②Schreiben Sie einen Text, eine Veröffentlichungsschaltfläche und einen Kommentarbereich

③Klicken Sie auf die Schaltfläche und das Onclick-Ereignis führt die Funktion fun1() aus.

CSS-Inhalt:

*{ 
 Polsterung: 0;
 Rand: 0;
 }
 #Kasten{
 Breite: 600px;
 Hintergrundfarbe: Aqua;
 Rand: 0 automatisch;
 }
 #fabu{
 Breite: 600px;
 Höhe: 300px;
 Hintergrundfarbe: Burlywood;
 }
 #pinlu{
 Breite: 600px;
 Hintergrundfarbe: Aqua;
 }
 Textbereich{
 Breite: 600px;
 Höhe: 300px;
 Rand: keiner;
 Hintergrundfarbe: Burlywood;
 Schriftgröße: 24px;
 }
 #btn_1{
 Breite: 600px;
 Höhe: 30px;
 Hintergrundfarbe: Kornblumenblau;
 Gliederung: keine;
 }
 ::Platzhalter{
 Schriftgröße: 24px;
 }
 #btn_2{
 Breite: 80px;
 Höhe: 30px;
 Hintergrundfarbe: braun;
 Rahmenradius: 4px;
 
 }
 
 p{text-align: right;}
 #neirong{
 Hintergrundfarbe: Koralle;
 Rand: 1px massives Maserholz;
 
}

① *{} Setzen wir zunächst die Standard-Innen- und Außenränder aller Elemente auf 0

②Dann legen Sie die entsprechenden Stile für jedes Element entsprechend fest

③Verwenden Sie das Pseudoelement-Tag ::placeholder, um die Größe des Eingabeaufforderungstextes festzulegen

④ Wir legen die Höhe der übergeordneten Box und des Div des Kommentarbereichs nicht fest und lassen sie entsprechend der Menge des Kommentarinhalts erweitern.

Funktion fun1(){
 $('#pinlun').anhängen(
  "<div id='neirong'>" + text.value+"<br><p><button id='btn_2'>Kommentar löschen</button></p></div>");
  text.value="";}

 (Funktion fun2() {
  $("#pinlun").on("Klick", "Schaltfläche", Funktion() {
  $(dies).parent().parent().entfernen();
 })})()

①jQuery verwendet $("selector"), um Elemente abzurufen

②Die Methode append () fügt dem angegebenen Element Inhalt (einschließlich Tags) hinzu

③Wenn wir auf „fun1()“ klicken, müssen wir den Inhalt auch auf „leer“ setzen (text.value=„“)

④Denn die Pixel, die beim Klicken erscheinen, werden später vom Browser hinzugefügt

1. Wir können das Element also nicht finden, wenn wir das Listener-Ereignis direkt binden (es wird gemeldet, dass das Element nicht definiert ist)
2. Daher verwenden wir jQuery, um eine Funktion zur sofortigen Ausführung fun2() festzulegen
3. Die on-Methode in fun2(): element a.on("listen event", "element in element a", try function), sodass Sie sich keine Gedanken darüber machen müssen, ob das Element undefiniert ist

⑤Da die Funktion an die Schaltfläche gebunden ist, ist dies die Schaltfläche. Zum Löschen müssen wir den Inhalt des div löschen und parent () dient zum Suchen des übergeordneten Elements.

⑥Der Vater des Buttons ist das hinzugefügte Div, Methode remove(): Löscht das Element

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.