无法读取未定义的属性“removeClass”。使用Javascript

我想打电话给使用这个调用删除类：无法读取未定义的属性“removeClass”。使用Javascript

MyUtils.removeClass(e,"empty");

但我得到的错误在我的调试器“无法读取属性‘’未定义的” removeClass。我似乎无法弄清楚我的removeClass调用中缺少的是什么。

这是我的removeClass函数。

var removeClass = function removeClass(el, classStr) { 
    delete el.className; 
};

这里是完整的代码，HTML正在测试两种方法。

<body> 
    <div id="foo" class="column empty">Halloween!</div> 
    <script type="text/javascript" src="utils.js"></script> 
    <script> 
     var e = document.getElementById("foo"); 
     var q = function (s){ document.write("<div>"+s+"</div>"); } 
     q("initial (" + e.className+")"); 
     MyUtils.removeClass(e,"empty"); 
     q("removed empty (" + e.className+")"); 
     MyUtils.addClass(e,"column"); 
     q("added column again (" + e.className+")"); 
     MyUtils.removeClass(e,"scary"); 
     q("removed scary (" + e.className+")"); 
     MyUtils.addClass(e,"lum"); 
     q("added lum (" + e.className+")"); 
     MyUtils.removeClass(e,"column"); 
     q("removed column (" + e.className+")"); 
     MyUtils.addClass(e,"foo"); 
     q("added foo (" + e.className+")"); 
     MyUtils.addClass(e,"bar"); 
     q("added bar (" + e.className+")"); 
    </script> 
</body>

而且MyUtils功能：

var MyUtils = (function() { 

function addClass(el, classStr) { 
    if(el.className !== classStr) { 
     el.className = classStr; 
    } 
}; 

var removeClass = function (el, classStr) { 
    delete el.className; 
}; 

var walkTheDom = function walkTheDom(el, f) { 
    f(el); 
    el = el.firstChild; 
    while(el) { 
     walkTheDom(el,f); 
     el = el.nextSibling; 
    } 
}; 

var getElemebtsByClassName = function getElementsByClassName(c) { 
    var results = []; 
    var re = new RegExp("\\b"+c+"\\b"); 
    var f = function (el) { 
     if(el.nodeType === 1) { 
      if(el.className.search(re) !== -1) { 
       results.push(el); 
      } 
     } 
    }; 
    walkTheDom(document.body, f); 
}; 

}());

来源

2014-10-29 TheCrownedPixel

错误提示'没有定义MyUtils'，或者它被用在不可用。你能为片段提供更多的上下文吗？ – 2014-10-29 16:05:52

我刚刚添加了调用它的HTML代码，以及完整的JavaScript MyUtils函数。 – TheCrownedPixel 2014-10-29 16:10:12

我建议看一下http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html – dreyescat 2014-10-29 16:17:28

问题是您的功能只能在MyUtils内部访问，但不能从外部访问。

你可以使用

var MyUtils = { 
    addClass: function(el, classStr) { 
    if (el.className !== classStr) { 
     el.className = classStr; 
    } 
    }, 
    removeClass: function(el, classStr) { 
    delete el.className; 
    } 
    /*, ... */ 
};

或者，如果你也想拥有私有变量，

var MyUtils = (function(){ 
    var thisIsPrivate = whatever; 
    function addClass(el, classStr) { 
    if (el.className !== classStr) { 
     el.className = classStr; 
    } 
    }, 
    function removeClass(el, classStr) { 
    delete el.className; 
    } 
    /* ... */ 
    // Export public properties to the outside: 
    return {addClass: addClass, removeClass: removeClass/*, ... */}; 
})();

来源

2014-10-29 16:19:18 Oriol

随着a revealing module，你必须指定什么从它透露为MyUtil：

var MyUtil = (function() { 
    // ... (define the functions of the module) 

    // reveal its "public" functions 
    return { 
     addClass: addClass, 
     removeClass: removeClass, 
     walkTheDom: walkTheDom, 
     getElemebtsByClassName: getElemebtsByClassName 
    }; 
})();

如果没有这最后一步， MyUtil将保存undefined的值，而不涉及function被定义。

来源

2014-10-29 16:16:47

无法读取未定义的属性“removeClass”。使用Javascript

回答

相关问题