Heute habe ich auf eine sehr seltsame Nachfrage gestoßen, die wie folgt ist: Wenn ich auf den Text klicke, wird eine Schaltfläche Löschen angezeigt, um den Text zu löschen, den ich gerade geklickt habe.
Hey? Ich dachte zu dieser Zeit darüber nach, es war nicht schwierig. Aber wie es eine seltsame Nachfrage war, wie könnte es so einfach sein?
Ja, es gibt eine andere Funktion. Ich weiß nicht, auf welchem Tag ich geklickt habe. Es gibt zu viele Tags, die Text in Englisch tragen können ...
Zu dieser Zeit war ich verwirrt. Sie wussten nicht, auf welches Tag zu klicken soll, wie bin ich das Ereignis? Für wen ich die Veranstaltung gebunden habe? Ich musste es immer noch schreiben, nachdem ich lange gesprochen hatte. Also fing ich an zu arbeiten.
Meine Idee ist so:
START
1. Zuerst müssen Sie das von der Maus klickte Objekt klicken lassen. (Die Frage ist ... Woher weiß ich, auf welches ich geklickt habe)
Schreiben Sie dann eine Funktion, um das von der Maus geklickte Objekt zu erhalten
Die Funktion get_tag ist an das Onclick -Ereignis des Körpers gebunden, und dann wird ein Ereignisparameter akzeptiert.
Anschließend verfügt das Ereignisobjekt über ein Zielattribut, das ein Objekt ist, das den Mausklick direkt erhalten kann.
Lassen Sie uns anmelden, um zu sehen
Nun, es ist in Ordnung. Es steht im Einklang mit der vorherigen Idee und erzielt das gewünschte Ergebnis.
2. Holen Sie sich das Objekt. Aber wie lösche ich es?
var del_tag = function () {var tag = null; return {get: function (e) {tag = e; }, del: function () {$ (tag) .remove (); }}}Da die Schaltfläche Löschen nichts mit dem von uns klickenden Objekt zu tun hat, müssen wir einen Verschluss schreiben und ein Tag deklarieren, um das von uns geklickte Objekt zu speichern.
Dann geben Sie zwei Funktionen zurück, einer erhalten. Wird verwendet, um das Objekt zu erhalten, auf das die Maus letztes Mal geklickt hat. Einer ist del. Wie der Name schon sagt, löschen Sie das angeklickte Objekt.
Da es sich um einen Verschluss handelt, wird das Tag im Speicher gespeichert, um die gewünschte Funktion zu erkennen.
3. Kombination der beiden
var del_tag = function () {var tag = null; return {get: function (e) {tag = e; }, del: function () {$ (tag) .remove (); }}} var dt = del_tag (); // DEL_TAG der DT -Funktion get_tag (e) {var ele = e.target; // rufen Sie dt.get () auf. Der Parameter ist der Wert des Parameters von GET_TAG -Funktion Ereignis dt.get ($ ($ (ele))); } $ ('#del'). click (function () {// hier, da der Verschluss erstellt wird, wurde das Objekt, auf das wir letztes Mal geklickt haben.4. Überprüfen Sie den Effekt
5. Der Effekt ist ziemlich gut. Aber ... Sie können es löschen, indem Sie auf ein bestimmtes Objekt klicken. Ist das ein Chaos? Dann ändern Sie es
var del_tag = function () {var tag = null; return {get: function (e) {tag = e; }, del: function () {$ (tag) .remove (); }}} var dt = del_tag (); // DEL_TAG der DT -Funktion get_tag (e) {var ele = e.target; $ (ele) .css ('Border', '1px Solid Red') var tagname = ele.tagname; // Definieren Sie ein Tag -Array. Wird verwendet, um das Objekt zu speichern, das wir var tagarr = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p' löschen möchten. // Beurteile, ob das von uns geklickte Objekt in unserem Array deklariert ist, können wir es löschen. if (tagarr.indexof (tagname)> -1) {// rufe dt.get () parameter ist der Wert der Get_Tag -Funktion Ereignisereignis Parameter Ziel Dt.get ($ (ele)); }} $ ('#del'). click (function () {// hier, da der Verschluss erstellt wird, wurde das Objekt, auf das wir das letzte Mal geklickt haben.Schauen Sie sich den Effekt an:
Ja. Es scheint richtig. Es kann nicht gelöscht werden, wenn es nicht das Objekt ist, das wir definieren.
Obwohl es sich etwas von dem in den Anforderungen erwähnten gelöschten Text unterscheidet. Aber solange Sie mir sagen, dass Sie diese Etiketten verwenden, um den Text zu hosten, kann ich ihn löschen ...
Lassen Sie mich betonen, dass unsere Funktion get_tag () nicht am Körper- oder HTML -Onclick -Ereignis platziert werden kann. Andernfalls wird der Text der gesamten Seite überhaupt gelöscht ...
Die Funktion get_tag () ist an die Div gebunden, die Sie den Text löschen möchten.
Der obige Artikel JS erhält das Objekt, das von der Maus geklickt und auf eine andere Schaltfläche klickt, um den Implementierungscode des Objekts zu löschen. Es ist der gesamte Inhalt, den ich mit Ihnen geteilt habe. Ich hoffe, es kann Ihnen eine Referenz geben und ich hoffe, Sie können Wulin.com mehr unterstützen.