단지 내가 최근에 대한 <strong>자바 스크립트</strong> 객체를 배우기 시작했습니다 this.element

Question

를 사용하는 경우 두 번째 요소를 선택하는 방법과 프레임 워크 등 같은 jQuery를 및 모더 나이저 작업을 querySelectorAll.

나는 더 자바 스크립트 객체가 작동하는 방법을 배우고, 어떻게 자신의 모든 잠재력을 활용하기 위해, 내 자신의 작은 "프레임 워크"을 만들기 위해 노력했다.

그것의 내가 지정한 셀렉터에 여러 요소를 잡아는 querySelectorAll() 방법 (및 루프에 대한)를 사용하여 전역 변수를 설정하려고 할 때까지 모든 지금까지 꽤 매끄럽게 갔다.

이렇게 특정 선택자를 사용하여 각 요소에서 class을 추가하거나 제거하려고했습니다. 그러나, 그것은 낱단의 아주 마지막 성분에 이제까지 작동했다.

var aj = function(sr){ 
    this.selector = sr || null; // set global selector variable 
    this.element = null; 
} 

aj.prototype.init = function(){ 
    switch(this.selector[0]){ 
     // first, second, third case e.t.c... 
     default: 
      var els = document.querySelectorAll(this.selector); // select all elements with specified selector (set above) 
      for(var i = 0; i < els.length; i++){ 
       this.element = els[i]; 
      } 
    } 
}; 

aj.prototype.class = function(type, classes){ 
    if(type === "add"){ // if the user wants to add a class 
     if((" " + this.element.className + " ").indexOf(" " + classes + " ") < 0){ 
      this.element.className += " " + classes; 
     } 
    } else if(type === "remove") { // if the want to remove a class 
     var regex = new RegExp("(^|)" + classes + "($|)", "g"); 

     this.element.className = this.element.className.replace(regex, " "); 
    } 
}; 

예 :

<div class="example-class">Example</div> 
<div class="example-class">Example 2</div> <!-- only this one will be altered !--> 
<script> 
    $(".example-class").class("add", "classname"); 
</script> 

왜이 발생 될 다음

---

내 (관련) 자바 스크립트입니까? My for 루프가 올바른 것 같습니다. 그래서 무엇이 잘못되었는지 확실하지 않습니다. 죄송 합니다만, 분명히 보일지라도, 나는 여전히 바닐라 자바 ​​스크립트에 익숙하지 않습니다.

모든 도움 (및 제안)을 부탁드립니다.
감사합니다.

Answer 1

for(var i = 0; i < els.length; i++){ 
    this.element = els[i]; 
} 

당신은 루프를 가지고있다. 루프를 돌 때마다 this.element에 값이 할당됩니다.

루프를 처음 접하면 els[0] 값이 할당됩니다. 두번째로 els[1]의 값을 할당합니다.

일치하는 두 요소 만 있으므로 루프의 끝에 도달하여 중지됩니다.

이 시점에서 this.element은 여전히 ​​els[1]과 같습니다. 당신이 뭔가를하고 싶은 경우

---

는 당신이 className을 수정할 때 els을 통해 루프가 els의 각 항목에 (같은 클래스의 멤버를 추가).