javascript - 使用webpack时jQuery的选择器未定义

我正在学习webpack，并创建了一个模块来完成一个简单的任务：单击一个元素以在其上添加此CSS属性margin-right: 5rem;

import $ from 'jquery'

class ShiftRight {
    constructor() {
        this.more = $('.more')
        this.shifting()
    }

    shifting() {
        this.more.click(function() {
            this.more.addClass('more--clicked')
        })
    }
}

export default ShiftRight

HTML的部分也很简单：

    <div class="more">
        <div class="more-sign"></div>
    </div>

错误消息：Cannot read property 'addClass' of undefined。 this.more为何未定义？那是因为jQuery吗？在这种情况下与webpack合作的纯JavaScript方法是什么？

最佳答案

jQuery似乎已加载，因为在this.mode.addClass而不是$(".mode")或this.more.click上收到错误。

问题是上下文，在单击回调函数内部，this并不引用ShiftRight实例，而是引用了clicked元素。使用$(this).addClass("more--clicked")

shifting() {
    this.more.click(function() {
        $(this).addClass('more--clicked')
    })
}

或箭头功能

shifting() {
    this.more.click(() => {
        this.more.addClass('more--clicked')
    })
}

应该解决