点击元素无法获取data-num属性的技术问题求助

你遇到的问题核心是箭头函数不会绑定自身的this上下文，它的this会继承自外层作用域，所以点击事件里的$(this)根本不是你点击的那个.thumbs按钮，自然拿不到data-num的值。

解决方案一：改用普通函数作为事件处理函数 #

把箭头函数换成传统的函数表达式，此时this会指向触发点击事件的DOM元素：

$('.thumbs').click(function() {
    let s = $(this).attr('data-num');
    imgSet(s);
})

解决方案二：通过事件对象获取目标元素 #

如果坚持要用箭头函数，可以通过事件参数的currentTarget属性拿到绑定事件的元素：

$('.thumbs').click((e) => {
    let s = $(e.currentTarget).attr('data-num');
    imgSet(s);
})

额外优化：用jQuery的.data()方法读取data属性 #

jQuery提供了专门的.data()方法来读取data-*属性，比.attr()更适配这类场景：

// 配合普通函数
$('.thumbs').click(function() {
    let s = $(this).data('num');
    imgSet(s);
})

// 或者箭头函数+事件对象
$('.thumbs').click((e) => {
    let s = $(e.currentTarget).data('num');
    imgSet(s);
})

为什么之前的待办事项代码没问题？ #

你之前的删除按钮点击事件里，并没有依赖this获取data-plan，而是提前把planID存在了外部变量中，箭头函数可以捕获这个变量，所以没出现类似问题。

另外补充：如果你的.thumbs按钮是动态创建的（像你这样通过循环生成后追加到DOM），建议用事件委托绑定点击事件，避免后续新增按钮无法触发事件的问题：

// 事件委托：绑定到父元素#thumbCase上
$('#thumbCase').on('click', '.thumbs', function() {
    let s = $(this).data('num');
    imgSet(s);
})

内容的提问来源于stack exchange，提问作者MilanKlepar