Question

我正在学习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方法是什么？

Answer 1

似乎加载了jQuery，因为this.mode.addClass上的错误不在$(".mode")或this.more.click上。

问题是上下文，在单击回调函数中，this没有引用ShiftRight实例，它引用了被点击的元素。使用$(this).addClass("more--clicked")

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

或箭头功能

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

应该解决这个问题

Answer 2

如果是jquery问题，请尝试将此添加到您的webpack配置

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
]

使用webpack时，jQuery的选择器是未定义的

2 个答案: