想請教前端的大大這個應該是很基本的問題
一開始在頁面上列出很多個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

在 function(event){} 開頭寫個 var that = this，然後後面都用 that

關鍵字是this, binding, scope, javascript

其實有ajax版XD

好ES6不用嗎

在success那裡的 function(response){} 改成(res)=>{}使用ES6的Arror Function 就能避開this的問題

有 Web版

臉書有 JavaScript.tw 社團喔

全部改成await

臉書也有Frontend Developers Taiwan喔

Function.prototype.bind

想回答的都被講完了 看來強者都在這板

高手如雲

感謝高手大大們～ PTT的ajax跟web_design板看起來冷清這裡的討論比較熱烈而且很有深度!

這是this bind的問題 因為axios的callback在執行的時候this會指向window 在callback的後面加上.bind(this)就可以綁定onclick的this了推薦去看這篇文章 介紹的很詳細 https://ithelp.ithome.com.tw/m/articles/10193193

ES6 Arrow Function 綁定this 的scope 還有看到jq覺得頭很痛 看你要不要改document.querySelector

都我的問題

asynchronize真的很整人，但也是很重要的基礎