Question

我正在使用javascript创建自己的类方法

.hide = function() {
this.each(function(index){
    this.style.display="none";
});
};

但这不起作用。你能告诉我我做错了吗？

Answer 1

不建议在Javascript中向现有对象添加功能。但是，您可以创建一个这样的辅助函数：

var hide = function(domEle) {
  domEle.style.display="none";
}

为了能够使用您的语法，您可以执行以下操作：

创建一个接受dom元素数组的类。或者提供将dom元素添加到数组的函数。
将函数hide添加到上面的类中而不是每次使用forEach。每个都不是一部分 Javascript规范。阅读MDN https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array

以下是一些基本代码（我没有对语法错误进行测试）：

function myLittleJQuery() {
  this._array = [];
}

myLittleJQuery.prototype = {
  add: function(domEle) {
    this._array.push(domEle);
  },

  hide: function() {
    this._array.forEach(function(domEle){
      domEle.style.display = "none";
    })
  }
}

//Usage
var my$ = new myLittleJQuery();
my$.add(someDomEle);
my$.add(someOtherDomEle);

my$.hide();

Answer 2

Element.prototype.hide = function() {
    this.style.display="none";
};

您可以扩展单个DOM元素。这里我们将hide方法添加到Element的原型中。如果我那么

document.querySelector("h2").hide();

页面上的第一个h2元素消失。

这是将方法添加到各个dom元素上。如果你想对dom元素集合进行操作，那么你将不得不扩展NodeList的原型，这是你得到的对象类型

document.querySelectorAll("h2");

解决此问题的一种方法是将hide方法放在每个DOM元素上。然后在hide上添加不同的NodeList方法。也许是这样的：

Element.prototype.hide = function() {
    this.style.display="none";
};

NodeList.prototype.hide = function() {
    for (var i = 0; i < this.length; i++) {
        this[i].hide();
    }
};

添加这两种方法会为您提供灵活的API，让您可以在元素列表或单个元素上调用hide。

然后运行

document.querySelectorAll("h2").hide();

会隐藏页面上的所有h2元素。

IE6-7不支持此功能。因此，如果这对您来说是一个问题，那么使用jQuery。

Answer 3

如果您不想扩展DOM元素，那么您仍然可以使用aychedee的代码，但将其定义为函数：

var hide = function() {
    if(! this)
      return null;
    var i;
    if(this.length){
      i=this.length;
      while(--i !== -1) {
        this[i].style.display="none";
      }
      return this;
    }
    this.style.display="none";
    return this;
};
hide.call(document.getElementById("someid"));
hide.call(document.getElementsByTagName("p"));

使用javascript自己的隐藏类方法

3 个答案: