作者NCKUFatPork (成大肥宅悲歌)
看板Ajax
標題[問題] jquery中,e.target跟this的差別?
時間Fri Jan 19 16:31:19 2018
小弟最近在練習jquery的fadeOut和remove
現在我在html檔中有一個ul:
<li class="todoItem"><span class="delete"> x </span>bla</li>
我希望的功能是點了x之後list item會消失
所以我寫的jquery如下:
$(".delete").click(e =>
$(e.target)
.parent().fadeOut(150, e => $(e.target).remove())
)
執行後有達到我預期的效果,
但看console會得到以下訊息:
TodoList.js:9 Uncaught TypeError: Cannot read property 'target' of undefined
at HTMLLIElement.$.parent.fadeOut.e (TodoList.js:9)
at HTMLLIElement.opt.complete (jquery-3.2.1.js:7236)
at fire (jquery-3.2.1.js:3317)
at Object.fireWith [as resolveWith] (jquery-3.2.1.js:3447)
at tick (jquery-3.2.1.js:7079)
at Function.jQuery.fx.tick (jquery-3.2.1.js:7405)
at schedule (jquery-3.2.1.js:6783)
但我如果改寫把上面的程式碼稍微改寫:
$(".delete").click(e =>
$(e.target)
.parent().fadeOut(150, function(){$(this).remove()})
)
那程式運行OK也不會出現上述的error訊息
我以為e.target跟this應該是一樣的?
所以我不知道為什麼會有這個差異。
想請問一下我的理解哪裡有問題?
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 128.125.208.229
※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1516350681.A.EF7.html
推 jmlntw: 變數的 scope 問題,前者你沒有把 e 傳到 fadeOut 的 call 01/19 16:37
→ jmlntw: back 裡。 01/19 16:37
→ WunoW: 改成fadeOut(150, () => $(e.target).remove()) 01/19 17:36
→ WunoW: 而e.target跟$(this)也不可能一樣,$(this)是jquery物件 01/19 17:38
推 eight0: 先不問 e.target 和 this,你知道 e 是什麼嗎? 01/19 18:05
嗚喔喔 我現在知道怎麼改了但不知道這些怎麼來的
基礎不穩QQ,我再回去查一下相關的東西
※ 編輯: NCKUFatPork (128.125.208.229), 01/19/2018 18:16:35
→ EricTao: e0大 可以給個關鍵字嗎? 01/19 18:32
推 comicat: event 01/20 18:41
→ xdraculax: 能用 this 就優先用 this 啊,一樓就正解了 01/21 19:36
推 visa9527: this作用域每層都不一樣,傳 e 比較不會搞混 01/23 12:22
→ xdraculax: 用 e 是自我設限,要嘛所有主動呼叫動作都要建成事件, 01/24 07:13
→ xdraculax: 要嘛還要代個假 e,多此一舉 01/24 07:13