Question

提前道歉我觉得这是一个非常简单的解决方案，我正处于严重的脑屁中间。我只是试图抓取我使用ES6语法点击的项目的数据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引用的是类，而不是单击的元素。

将箭头功能更改为常规功能。

Answer 2

除了Josan的回答，如果你想继续使用箭头功能，请像这样使用：

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

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

有关更多讨论，请参阅this thread。

Answer 3

使用JQuery更简单，更容易：

$(".list-item").on('click', function() {
  console.log($(this).data('id'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

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

3 个答案: