小编Cof*_*ean的帖子

HTML

<div class="sym-box" data-card="0">
    <div id="a"><img src="..."></div>
</div>
<div class="sym-box" data-card="1">
    <div id="b"><img src="..."></div>
</div>
<div class="sym-box" data-card="2">
    <div id="c"><img src="..."></div>
</div>

JS

var attribute;

function myFunction() {
    attribute = this.getAttribute('data-card');
}

var symboxes = document.getElementsByClassName('sym-box');

for (i = 0; i < symboxes.length; i++) {
  symboxes[i].addEventListener('click', myFunction, false);
}

上面的代码按预期工作，'this' 引用了被点击的元素。然而，当我把它写成一个箭头函数时，我得到“Uncaught TypeError: this.getAttribute is not a function”，因为“this”现在指的是 window 对象。

const myFunction = () => {
    attribute = this.getAttribute('data-card');
};

所以我的问题是如何将 myFunction() 重写为箭头函数，其中“this”指的是被点击的元素？

注意： 我的问题已被标记为重复，但我要求在使用箭头函数时解决相同的问题。只是被告知“你不能”或“不要”并不能回答我的问题。