使用javascript创建自己的隐藏类方法

own hide class method using javascript

本文关键字：隐藏 类方法 自己的 创建 javascript 使用      更新时间：2023-09-26

我正在使用javascript 制作自己的类方法

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

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

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

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

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

  • 创建一个接受dom元素数组的类。或者提供一个函数将dom元素添加到数组中
  • 将函数hide添加到上面的类中，而不是每次使用forEach。每个都不是
    的一部分Javascript规范。读取MDNhttps://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();

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。

如果您不想扩展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"));
相关文章：