자바 스크립트 탭 - 루프 설명을 위해

Question

나는 이것을 "원숭이 수준"으로 설명하고 어디에서나 찾을 수 없었습니다. 나는 JS를 연구 중이며 페이지 안에 탭을 만들려고했다. W3SCHOOLS 예제에서 코드 조각을 이해할 수 없다는 것을 제외하고는 모든 것이 괜찮다.

HTML :

<div class="tab"> 
    <button class="tablinks" onclick="openCity(event, 'London')">London</button> 
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> 
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> 
</div> 

<div id="London" class="tabcontent"> 
    <h3>London</h3> 
    <p>London is the capital city of England.</p> 
</div> 

<div id="Paris" class="tabcontent"> 
    <h3>Paris</h3> 
    <p>Paris is the capital of France.</p> 
</div> 

<div id="Tokyo" class="tabcontent"> 
    <h3>Tokyo</h3> 
    <p>Tokyo is the capital of Japan.</p> 
</div> 

JS :

function openCity(evt, cityName) { 
    // Declare all variables 
    var i, tabcontent, tablinks; 

    // Get all elements with class="tabcontent" and hide them 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 

    // Get all elements with class="tablinks" and remove the class "active" 
    tablinks = document.getElementsByClassName("tablinks"); 
    for (i = 0; i < tablinks.length; i++) { 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
    } 

    // Show the current tab, and add an "active" class to the button that opened the tab 
    document.getElementById(cityName).style.display = "block"; 
    evt.currentTarget.className += " active"; 
} 

질문 :

가 for 루프의 목적은 무엇인가

? "i"변수가있는 이유는 무엇입니까? 조건에서 tabcontent/links.length가 사용되는 이유는 무엇입니까?

여러분의 도움을 진심으로 감사드립니다. 고맙습니다!

Answer 1

일련의 작업을 여러 번 반복해야하는 경우 루프를 사용합니다.

이 예제에서는 "tablinks"클래스의 요소를 모두 가져 와서 tablinks라는 변수에 저장합니다. 상자와 같은 변수를 상상해보십시오.

tablinks = document.getElementsByClassName("tablinks"); 

이제 상자의 각 요소 (탭 링크)에 작업을 실행하려고합니다.

처음에 더미 변수 "i"를 선언하고,이 변수가 살며 루프에서 죽으면, 변수를 값 0 (0)으로 초기화합니다.이 값은 "i = 0"부분이어야합니다.이 변수를 사용합니다 상자의 요소를 반복합니다.

상자에 N 개의 요소가 있습니다. tablikns.length를 사용하는 요소의 수를 알기 위해 변수 길이는 변수 tablink에서 탭 링크의 양을 알려줍니다.

이제 변수 i = 0을 시작 했으므로 "tablink.length"지침을 반복해야하므로 반복을 실행할 때마다 카운터 "i"를 증가시켜야합니다.이 작업은 "i ++ "부분.

카운터가 tablinks.length 값에 도달하면 반복을 중지하고 나머지 코드를 계속 진행하십시오. 이 부분은 다음과 같습니다. "i < tablinks.length"

마지막으로 모두 다음과 같이 작성되었습니다. 이 박스 3 개 요소이며, 만약 0 값과 변수를 I 시작하면

for (i = 0; i < tablinks.length; i++) { 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
} 

은 조건 "나는 < tablinks.length"가 값 I = 0, 1 및 2에 대해 참이면 I = 3 조건이 거짓이고 루프를 종료하므로 반복을 3 번 수행했습니다.

희망은 당신에게 분명히 있습니다.

감사합니다.

Answer 2

이 예제에서 첫 번째 for 루프는 클래스 이름이 "tabcontent"인 모든 요소를 ​​통과하고 두 번째 요소는 클래스 이름이 "tablinks"인 두 번째 루프를 통과합니다.

루프의 변수 "i"는 인덱스를 나타냅니다. 문자 i를 사용하는 것만으로 충분합니다.

getElementsByClassName ("tabcontent") 함수는 클래스 이름이 "tabcontent"인 모든 요소의 콜렉션을 리턴합니다. "탭 링크"와 동일합니다.

tabcontent.length는 클래스 이름이 "tabcontent"인 3 개의 요소가 있기 때문에 3을 반환하며 모든 루프를 거치기를 원합니다. 배열은 항상 그래서 0

시작 이후 = 0, tabcontent [0] 우리에게 첫 번째 요소를 줄 때

tabcontent [내가], 우리의 루프의 첫 번째 단계에 있으므로, 해당 요소에 액세스 이 예에서, 루프는 내가 = 3

For 루프에 대한 자세한 내용을 읽을 때 조건 때문에 내가 < tabscontent.length이 충족되지, 0, 1, 2 다음 종료 갈 것입니다 : https://www.w3schools.com/js/js_loop_for.asp

및 배열 : https://www.w3schools.com/js/js_arrays.asp