作者asleepme (500年沒換暱稱了)
看板Soft_Job
標題[請益] 前端async的問題
時間Thu Aug 23 17:48:11 2018
想請教前端的大大這個應該是很基本的問題
一開始在頁面上列出很多個items，每個item會有一個加入的按鈕
點了加入之後，就會透過ajax去call api在後端db紀錄下來
到這邊都沒什麼問題
但是想在前端把剛剛item的加入按鈕變成不能點，文字也變成已加入
code snippet像這樣
$('.btn-add-favorite').click(function(event) {
axios.post('/favorite/add', {
itemId: $(this).data("item-id")
})
.then(function (response) {
// handle success
$(this).attr('disabled', true);
$(this).html('已加入');
})
.catch(function (error) {
// handle error
});
});
不過顯然在success那邊用this不會是同樣的node
通常這種應用要怎麼找到原本的node呢？
目前想到的作法，就是每個item塞一個unique id
進到click後把id用變數存下來
success那邊再用dom把這個id找出來處理
不知道比較好的作法是什麼呢？
P.S. 我在ptt或facebook上找不太到適合討論這類問題的板，有推薦的討論區嗎...
這個問題keyword不知道要下什麼, stack overflow上不知道怎麼找 T_T
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 223.140.253.26
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Soft_Job/M.1535017694.A.3C1.html
1F：推 LERICAL: 在 function(event){} 開頭寫個 var that = this，然後 08/23 17:50
2F：→ LERICAL: 後面都用 that 08/23 17:50
3F：推 eggli: 關鍵字是this, binding, scope, javascript 08/23 18:14
4F：推 SunNEET: 其實有ajax版XD 08/23 18:27
5F：推 Sunal: 好ES6不用嗎 08/23 18:44
6F：推 peanut97: 在success那裡的 function(response){} 改成(res)=>{} 08/23 18:54
7F：→ peanut97: 使用ES6的Arror Function 就能避開this的問題 08/23 18:55
8F：推 pilor: 有 Web版 08/23 19:35
9F：→ iphoneX5566: 臉書有 JavaScript.tw 社團喔 08/23 20:10
10F：→ ywbBetter: 全部改成await 08/23 22:37
11F：→ arthur01832: 臉書也有Frontend Developers Taiwan喔 08/23 23:01
12F：→ wonyeouuu: Function.prototype.bind 08/24 00:58
13F：推 LoserWon: 想回答的都被講完了 看來強者都在這板 08/24 01:08
14F：推 youuuuuli: 高手如雲 08/24 09:37
15F：→ asleepme: 感謝高手大大們～ PTT的ajax跟web_design板看起來冷清 08/24 10:39
16F：→ asleepme: 這裡的討論比較熱烈而且很有深度! 08/24 10:39
17F：推 scps960740: 這是this bind的問題 因為axios的callback在執行的時 08/24 13:23
18F：→ scps960740: 候this會指向window 在callback的後面加上.bind(this) 08/24 13:23
19F：→ scps960740: 就可以綁定onclick的this了 08/24 13:23
21F：→ scps960740: e.com.tw/m/articles/10193193 08/24 13:25
22F：推 DolphinLinn: ES6 Arrow Function 綁定this 的scope 還有看到jq覺 08/27 08:58
23F：→ DolphinLinn: 得頭很痛 看你要不要改document.querySelector 08/27 08:58
24F：→ async: 都我的問題 08/27 09:30
25F：推 pennymarkfox: asynchronize真的很整人，但也是很重要的基礎 08/28 17:28