jQuery的选择是使用的WebPack

我学习的WebPack，并创建了一个模块做一个简单的任务时未定义：单击某个元素在其上margin-right: 5rem;jQuery的选择是使用的WebPack

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的部分添加这个CSS属性也很简单：

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

错误消息：Cannot read property 'addClass' of undefined。 this.more怎么没有定义？这是因为jQuery？在这种情况下，纯JavaScript的方式与webpack合作是什么？

来源

2017-04-13 sijane

我不知道是什么的WebPack但我给它一个镜头，尝试this.addClass（'更多 - -clicked'）;因为你无论如何都在按钮的处理程序中。 – ProgrammerV5

仍然是一样的错误信息... – sijane

做什么ProgrammerV5说或使用箭头功能来保留上下文this.more.click（（）=> {this.more.addClass（'more - clicked'）; }）;' – Titus

jQuery的似乎是加载，因为你$(".mode")或this.more.click上this.mode.addClass得到一个错误没有。

问题是上下文中，在点击回调函数里面，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') 
    }) 
}

应该解决这个问题

来源

2017-04-13 15:39:06 Titus

，如果它是一个jQuery问题尝试添加到您的WebPack配置

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

来源

2017-04-13 15:16:43

jQuery的选择是使用的WebPack

回答

相关问题