Question

我试图使用此调用调用remove class：

MyUtils.removeClass(e,"empty");

但我收到错误＆＃34;无法读取属性＆＃34; removeClass＆＃34;未定义＆＃34;在我的调试器中。我似乎无法弄清楚我的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);
};

}());

Answer 1

问题是您的功能只能在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/*, ... */};
})();

Answer 2

使用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的定义。

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

2 个答案: