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

回答

相關問題