연속 JS 방법

Question

나는 파라미터

function getElement() { 
    var scope = document; 

    this.by = function(data) { 
     for (key in data) { 
      if (key == 'id') scope = scope.getElementById(data.id); 
      if (key == 'tag') scope = scope.getElementsByTagName(data.tag); 
     }  
     return scope; 
    } 
} 

function getEl(data) { return new getElement().by(data); } 

이 getEl(id : 'divId', tag : 'span') 같은 호출과는 DIV 'divId는'모든 지속 기간을 선택할 것이다에 기초하여 어떤 요소가 선택하는 JS 기능을 갖는다.

이제는 이전에 선택한 모든 범위에서 CSS를 변경하는 style이라는 다른 함수 (내부 function 요소)를 만들고 싶습니다.

뭔가

function getElement() { 
    var scope = document; 

    this.by = function(data) { 
     for (key in data) { 
      if (key == 'id') scope = scope.getElementById(data.id); 
      if (key == 'tag') scope = scope.getElementsByTagName(data.tag); 
     }  
     return scope; 
    } 

    this.style = function(data) { 
     console.log(data); 
    } 
} 

처럼 나는 getEl({id : 'divId', tag : 'span').style({display : 'none'})

처럼 뭔가를 할 수 있도록하고 싶습니다하지만이 작동하지 않습니다와 나는 getEl({id: "divId", tag: "span"}).style is undefined 오류가 발생합니다.

ps : 이것은 학습 목적으로 만 사용되며 jQuery 또는 다른 프레임 워크를 제안하지 마십시오. :)

친절에 감사드립니다!

Answer 1

getEl은 getElement에 대한 참조가 아닌 DOM 요소 목록 인 scope 변수를 반환합니다. new getElement().by(data).style()과 같은 작업을 수행하려면 this을 반환해야합니다.

this.by = function(data) { 
    for (key in data) { 
     if (key == 'id') scope = scope.getElementById(data.id); 
     if (key == 'tag') scope = scope.getElementsByTagName(data.tag); 
    }  
    return this; 
} 

그런 다음 getEl({id : 'divId', tag : 'span'}).style({display : 'none'})을 수행 할 수 있습니다.

가 scope 변수를 얻으려면, 당신은 다음과 같이 뭔가를 추가 할 수 있습니다

this.elements = function(){ 
    return scope; 
} 

getEl({id : 'divId', tag : 'span'}).elements()는 DOM 요소의 목록을 반환합니다. getEl({id : "tara_content", tag : "div"}).style({display : "none"}); getEl({id : "tara_content"}).style({display : "none"}); 는 마티아스 Bynens으로 getEl({tag : "div"}).style({display : "none"});

는 요소의 배열 또는 하나 개의 요소를 반환 할 수 있습니다 by()을 발견 :

Answer 2

나는 그것은 작동, 로켓 :)

function getElement() { 
    this.scope = document; 

    this.get = function() { 
     return this.scope; 
    } 

    this.by = function(data) { 
     for (key in data) { 
      if (key == 'id') this.scope = this.scope.getElementById(data.id); 
      if (key == 'tag') this.scope = this.scope.getElementsByTagName(data.tag); 

     } 
     return this; 
    } 

    this.style = function(data) { 
     console.log(typeof(this.scope)); 
     for (key in data) { 
      if (this.scope.length) { 
       for (i = 0; i < this.scope.length; i++) { 
        this.scope[i].style[key] = data[key]; 
       } 
      } 
      else { 
       this.scope.style[key] = data[key]; 
      } 
     } 
     return this; 
    } 
} 
function getEl(data) { return new getElement().by(data); } 

덕분에 그것을 알아 냈다 , 이유는 style()입니다. 길이는 this.scope입니다. (나는 타입을 강제 할 방법을 찾을 수 없었다).

도움 주셔서 감사합니다. :)