問(wèn)題描述

因?yàn)轫?xiàng)目一開(kāi)始沒(méi)有集成jquery，所以很多的方法都是用原生來(lái)寫(xiě)的。今天到網(wǎng)上找了幾個(gè)操作類名的方法，如下：

export const hasClass = (el, cls) => { return el.className.match(new RegExp(’(s|^)’ + cls + ’(s|$)’))}export const removeClass = function (el, cls) { if (hasClass(el, cls)) { var reg = new RegExp(’(s|^)’ + cls + ’(s|$)’)el.className = el.className.replace(reg, ’ ’) } }export const addClass = function (el, cls) { if (!this.hasClass(el, cls)) el.className += ' ' + cls}export const toggleClass = (el,cls) => { console.log(hasClass) if(hasClass(el,cls)){removeClass(el, cls) }else{addClass(el, cls) } }

但是在用的時(shí)候卻一直會(huì)報(bào)錯(cuò)，如下：

Uncaught TypeError: Cannot read property ’hasClass’ of undefined at addClass (Route.js?7c64bfe…:27892) at HTMLpElement.item.onclick (Route.js?7c64bfe…:139726)

我打斷點(diǎn)調(diào)試了下，還是沒(méi)能找到問(wèn)題出現(xiàn)的原因。不知道各位大神有沒(méi)有遇到過(guò)同樣問(wèn)題的？

問(wèn)題解答

export const addClass = function (el, cls) { if (!this.hasClass(el, cls)) el.className += ' ' + cls}就是this的問(wèn)題。直接把this.去掉，固定調(diào)用模塊內(nèi)部的hasClass方法。

export const toggleClass = (el,cls) => { console.log(hasClass) if(hasClass(el,cls)){removeClass(el, cls) }else{addClass(el, cls) } }

toggleClass里調(diào)用addClass和removeClass倒是對(duì)的，怎么想起來(lái)調(diào)用hasClass時(shí)前面加this的？

要看你這個(gè)this.hasClass()中this指的對(duì)象是什么了。你可以看看這個(gè)this指的是不是全局對(duì)象