собственный метод скрыть класс с помощью JavaScript

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 в класс выше Вместо каждого использования для каждого. каждый не является частью
  Спецификация 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 к прототипу элемента. Если я тогда сделал

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

Первый элемент h2 на странице исчезает.

Это добавление метода на отдельные элементы 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"));