javascript - 选择元素时无法找到 data-id

Question

提前道歉，我觉得这是一个非常简单的解决方案，而且我正处于严重的大脑放屁之中。我只是想使用 ES6 语法获取我正在单击的项目的 data-id，但无论我以哪种方式运行它，我总是会遇到未定义的情况。

HTML

<ul>
    <li class="list-item" data-id="item-1">Click me</li>
    <li class="list-item" data-id="item-2">Click me</li>
    <li class="list-item" data-id="item-3">Click me</li>
</ul>

JS

let $el = $('ul');

class List {
    constructor($el) {
        this.$el = $el;

        this.$listItem = $el.find('li');

        this.attachHandlers();
    }

    attachHandlers() {
        this.$listItem.on('click', () => {
            var data = $(this).attr('data-id');
            console.log(data);
        });
    }
}

const _init = () => {
    if ($el.length) {
        $el.each((i, v) => {
            new List($(v));
        });
    }
};

_init();

我已经尽可能地简化了代码，有人看到我在这里做错了什么吗？

Answer 1

问题出在您的 attachHandlers 方法中。由于您使用的是箭头函数，因此 this 引用的是类，而不是单击的元素。

将箭头函数更改为常规函数。