想请教前端的大大这个应该是很基本的问题
一开始在页面上列出很多个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真的很整人，但也是很重要的基础