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

时间:2017-04-13 15:11:57

标签: javascript jquery webpack

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

2 个答案:

答案 0 :(得分: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')
    })
}

应该解决这个问题

答案 1 :(得分:0)

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

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