Ajax 板


LINE

原 PO 好像剛學,下面幫你註解一下程式各行在做些什麼,並附上 jquery 的文件連結。 原本的程式碼︰ $(".delete").click( // 註冊 click 事件。click() 函式接受一個 event handler。 // https://api.jquery.com/click/#click-handler e => // handler 函式會得到一個 eventObject 物件(見前面的連結),也就是 // 這裡的 e。 // http://api.jquery.com/category/events/event-object/ $(e.target) // e.target 屬性會指向事件發生時,作用的元素。對於 click 事件 // 來說就是被點擊的物件。 // http://api.jquery.com/event.target/ .parent() // .parent() 會得到前面 $(e.target) 的父元素。 // http://api.jquery.com/parent/ .fadeOut( // .fadeOut() 函式用於將元素漸變至透明。fadeOut() 函式接受 // // * duration: 一段時間,指定動畫長度。 // * complete: 一個函式,當動畫結束時會被執行。 // // http://api.jquery.com/fadeOut/#fadeOut-duration-complete 150, // duration e => // complete 函式。這裡的 e 會是 undefined,因為 complete 函式不接 // 受任何參數,見前一個連結 $(e.target).remove() // 錯誤 ) ) 改成這樣就能正常執行︰ $(".delete").click(e => { const todoItem = $(e.target).parent(); // 把要用的元素存入一個變數 todoItem .fadeOut( // 將該元素 fadeOut 150, () => todoItem.remove() // 動畫完成後將該元素 remove ); }); 關於 this 你所修改的程式碼中,在 .fadeOut() complete 函式內使用了 this 關鍵字。 它指向被 fadeOut 的 DOM 元素,相當於前面程式碼的 todoItem。 http://api.jquery.com/fadeOut/#callback-function 然而 todoItem 其實是 $(e.target).parent(),換句話說 > 改成fadeOut(150, () => $(e.target).remove()) 還是錯誤的。應該是 $(e.target).parent().remove() 另外補充 * 即使在 event handler 內,eventObject.target 也不一定和 this 相等。 和 this 相當的是 eventObject.currentTarget。 http://api.jquery.com/event.currentTarget/ * 不少人會建議在不瞭解前避免使用 this 關鍵字。詳細可以參考 MDN︰ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this (縮︰https://is.gd/bf68PK) -- 推文部份我有些疑問 → xdraculax: 用 e 是自我設限,要嘛所有主動呼叫動作都要建成事件, 01/24 07:13 → xdraculax: 要嘛還要代個假 e,多此一舉 01/24 07:13 這裡指的是 trigger()?有文件可以參考嗎?並且 trigger 的說明是 > The event object is always passed as the first parameter to an event handler. https://api.jquery.com/trigger/ -- ▆▄   --



※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.225.59.3
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Ajax/M.1516849202.A.90B.html
1F:推 NCKUFatPork: 太感謝你的回答了 01/28 17:04







like.gif 您可能會有興趣的文章
icon.png[問題/行為] 貓晚上進房間會不會有憋尿問題
icon.pngRe: [閒聊] 選了錯誤的女孩成為魔法少女 XDDDDDDDDDD
icon.png[正妹] 瑞典 一張
icon.png[心得] EMS高領長版毛衣.墨小樓MC1002
icon.png[分享] 丹龍隔熱紙GE55+33+22
icon.png[問題] 清洗洗衣機
icon.png[尋物] 窗台下的空間
icon.png[閒聊] 双極の女神1 木魔爵
icon.png[售車] 新竹 1997 march 1297cc 白色 四門
icon.png[討論] 能從照片感受到攝影者心情嗎
icon.png[狂賀] 賀賀賀賀 賀!島村卯月!總選舉NO.1
icon.png[難過] 羨慕白皮膚的女生
icon.png閱讀文章
icon.png[黑特]
icon.png[問題] SBK S1安裝於安全帽位置
icon.png[分享] 舊woo100絕版開箱!!
icon.pngRe: [無言] 關於小包衛生紙
icon.png[開箱] E5-2683V3 RX480Strix 快睿C1 簡單測試
icon.png[心得] 蒼の海賊龍 地獄 執行者16PT
icon.png[售車] 1999年Virage iO 1.8EXi
icon.png[心得] 挑戰33 LV10 獅子座pt solo
icon.png[閒聊] 手把手教你不被桶之新手主購教學
icon.png[分享] Civic Type R 量產版官方照無預警流出
icon.png[售車] Golf 4 2.0 銀色 自排
icon.png[出售] Graco提籃汽座(有底座)2000元誠可議
icon.png[問題] 請問補牙材質掉了還能再補嗎?(台中半年內
icon.png[問題] 44th 單曲 生寫竟然都給重複的啊啊!
icon.png[心得] 華南紅卡/icash 核卡
icon.png[問題] 拔牙矯正這樣正常嗎
icon.png[贈送] 老莫高業 初業 102年版
icon.png[情報] 三大行動支付 本季掀戰火
icon.png[寶寶] 博客來Amos水蠟筆5/1特價五折
icon.pngRe: [心得] 新鮮人一些面試分享
icon.png[心得] 蒼の海賊龍 地獄 麒麟25PT
icon.pngRe: [閒聊] (君の名は。雷慎入) 君名二創漫畫翻譯
icon.pngRe: [閒聊] OGN中場影片:失蹤人口局 (英文字幕)
icon.png[問題] 台灣大哥大4G訊號差
icon.png[出售] [全國]全新千尋侘草LED燈, 水草

請輸入看板名稱,例如:Tech_Job站內搜尋

TOP