作者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/cn.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