javascript - la méthode d'exportation signale une erreur non définie après l'exportation

Question

Jquery n'étant pas intégré au début du projet, de nombreuses méthodes ont été écrites nativement. Aujourd'hui, je suis allé en ligne pour trouver quelques méthodes pour manipuler les noms de classe, comme suit :

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)
    }  
}

Mais lorsque je l'utilise, j'obtiens toujours une erreur, comme suit :

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

J'ai interrompu et débogué, mais je n'ai toujours pas trouvé la cause du problème. Je me demande si l'un d'entre vous a rencontré le même problème ?

Answer 1

export const addClass = function (el, cls) {
    if (!this.hasClass(el, cls)) el.className += " " + cls
}

就是this的问题。直接把this.去掉，固定调用模块内部的hasClass方法。

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

Il est correct d'appeler addClass et RemoveClass dans toggleClass. Pourquoi vous souvenez-vous d'avoir ajouté ceci devant hasClass ?

Answer 2

Cela dépend de l'objet auquel cela fait référence dans votre this.hasClass(). Vous pouvez vérifier si cela fait référence à l'objet global