Hari ini saya menemukan permintaan yang sangat aneh, yang seperti ini: ketika saya mengklik teks, tombol hapus muncul untuk menghapus teks yang baru saja saya klik.
Hai? Saya memikirkannya pada waktu itu, itu tidak sulit. Tapi, karena itu adalah permintaan yang aneh, bagaimana mungkin begitu sederhana?
Ya, ada fungsi lain. Saya tidak tahu tag mana yang telah saya klik. Ada terlalu banyak tag yang dapat membawa teks dalam bahasa Inggris ...
Pada saat itu, saya bingung. Anda tidak tahu tag mana yang harus diklik, bagaimana cara saya mengikat acara? Untuk siapa saya mengikat acara tersebut? Saya masih harus menulisnya setelah berbicara untuk waktu yang lama. Jadi saya mulai bekerja.
Ide saya seperti ini:
AWAL
1. Pertama, Anda harus mendapatkan objek yang diklik oleh mouse. (Pertanyaannya adalah ... bagaimana saya tahu yang mana yang saya klik)
Kemudian tulis fungsi untuk mendapatkan objek yang diklik oleh mouse
Fungsi GET_TAG terikat pada acara OnClick tubuh, dan kemudian parameter acara diterima;
Kemudian objek acara memiliki atribut target, yang merupakan objek yang dapat secara langsung mendapatkan klik mouse.
Mari masuk untuk melihat
Nah, tidak apa -apa. Ini konsisten dengan ide sebelumnya dan mendapatkan hasil yang diinginkan.
2. Dapatkan objek. Tapi bagaimana cara menghapusnya?
var del_tag = function () {var tag = null; return {get: function (e) {tag = e; }, del: function () {$ (tag) .remove (); }}}Karena tombol Hapus tidak ada hubungannya dengan objek yang kami klik, kami harus menulis penutupan dan mendeklarasikan tag untuk menyimpan objek yang kami klik.
Kemudian kembalikan dua fungsi, satu dapatkan. Digunakan untuk mendapatkan objek yang diklik mouse terakhir kali. Satu del. Seperti namanya, hapus objek yang diklik.
Karena ini adalah penutupan, tag akan disimpan dalam memori, hanya untuk mewujudkan fungsi yang diinginkan.
3. Kombinasi keduanya
var del_tag = function () {var tag = null; return {get: function (e) {tag = e; }, del: function () {$ (tag) .remove (); }}} var dt = del_tag (); // Tetapkan del_tag ke fungsi dt get_tag (e) {var ele = e.target; // hubungi dt.get () Parameter adalah nilai parameter acara GET_TAG Function DT.get ($ (ELE)); } $ ('#del'). Klik (function () {// Di sini, karena penutupan dibuat, objek yang kami klik terakhir kali disimpan. // sehingga Anda dapat secara langsung memanggil dt.del () di sini hapus objek dt.del ();})4. Lihat efeknya
5. Efeknya cukup bagus. Tapi ... Anda dapat menghapusnya dengan mengklik objek tertentu. Apakah ini berantakan? Lalu ubah
var del_tag = function () {var tag = null; return {get: function (e) {tag = e; }, del: function () {$ (tag) .remove (); }}} var dt = del_tag (); // Tetapkan del_tag ke fungsi dt get_tag (e) {var ele = e.target; $ (ele) .css ('border', '1px solid red') var tagname = ele.tagname; // Tentukan array tag. Digunakan untuk menyimpan objek yang ingin kami hapus var tagarr = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']; // menilai apakah objek yang kami klik dinyatakan dalam array kami, kami dapat menghapusnya. if (tagarr.indexof (tagName)> -1) {// Panggil dt.get () Parameter adalah nilai parameter acara GET_TAG Target dt.get ($ (ELE)); }} $ ('#del'). Klik (function () {// Di sini, karena penutupan dibuat, objek yang kami klik terakhir kali disimpan. // sehingga Anda dapat menghubungi dt.del () di sini untuk menghapus objek dt.del ();})Lihat efeknya:
Ya. Sepertinya benar. Itu tidak dapat dihapus jika bukan objek yang kita definisikan.
Meskipun sedikit berbeda dari teks yang dihapus yang disebutkan dalam persyaratan. Tapi selama Anda memberi tahu saya bahwa Anda akan menggunakan label -label itu untuk meng -host teks, saya bisa menghapusnya ...
Izinkan saya menekankan bahwa fungsi get_tag () kami tidak dapat ditempatkan pada tubuh atau acara HTML OnClick. Kalau tidak, teks seluruh halaman akan dihapus sama sekali ...
Fungsi get_tag () terikat pada div yang ingin Anda hapus teks.
Artikel JS di atas mendapatkan objek yang diklik oleh mouse dan mengklik tombol lain untuk menghapus kode implementasi objek adalah semua konten yang telah saya bagikan dengan Anda. Saya harap ini dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.