Javascriptのアコーディオン

Question

私は自分のページに簡単なアコーディオンを実装したいので、w3schoolsを閲覧してチュートリアルを見つけました。しかし、それはjavascriptコードでは、私は何かを理解できないforループがあります。誰もそれを説明することができますか？ はここにコードされ：

var acc = document.getElementsByClassName("accordion"); 
var i; 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function(){ 
     /* Toggle between adding and removing the "active" class, 
     to highlight the button that controls the panel */ 
     this.classList.toggle("active"); 

     /* Toggle between hiding and showing the active panel */ 
     var panel = this.nextElementSibling; 
     if (panel.style.display === "block") { 
      panel.style.display = "none"; 
     } else { 
      panel.style.display = "block"; 
     } 
    } 
} 

、ここで実際のW3Schoolsのページへのリンクである： https://www.w3schools.com/howto/howto_js_accordion.asp

Answer 1

これはforループ一意アコーディオン要素のonlick動作を識別するために使用されます。

名前アコーディオンを持つ複数の要素が今あなたがacc変数

のそれぞれの要素を反復処理開始とがある。これは、アコーディオン

var acc = document.getElementsByClassName("accordion"); 

としてクラスを持つページからすべての要素を取得するために使用されます

var i; 
for (i = 0; i < acc.length; i++) { 

accアレイ内の各要素について、onclick操作を定義し、それに対してトグル要素を設定します。 acc [i] .onclick = function（）{

選択したアコーディオンのトグルクラスをアクティブに変更し、アコーディオンをクリックするたびにパネルをブロック/なしに切り替えます。

 this.classList.toggle("active"); 
     var panel = this.nextElementSibling; 
     if (panel.style.display === "block") { 
      panel.style.display = "none"; 
     } else { 
      panel.style.display = "block"; 
     } 
    } 
} 
</script> 

・ホープ、このことができます。.. :)

Answer 2

は、彼らがloop.In通常のためにそれを入れるexamples.so 3が使用している理解

// get all the elements which have same class name. 
// it will return a html collection. 
var acc = document.getElementsByClassName("accordion"); 
var i; 

// now looping through the collection & adding event to each of the element. 
// click is a event name 
for (i = 0; i < acc.length; i++) { 
    // adding onclick event to each of the element 
    acc[i].onclick = function(){ 
     /* Toggle between adding and removing the "active" class, 
     to highlight the button that controls the panel */ 
     // toggle will remove a class if it there & if not there it will add the class 
     this.classList.toggle("active"); 

     /* Toggle between hiding and showing the active panel */ 
     // each of the element have a sibling p element. 
     // depending on the scenario it is showing and hiding the p element 
     var panel = this.nextElementSibling; 
     if (panel.style.display === "block") { 
      // will hide the p element 
      panel.style.display = "none"; 
     } else { 
      // will show p element 
      panel.style.display = "block"; 
     } 
    } 
} 

Answer 3

を容易にするためのいくつかのより多くのコメントが追加されました方法は、単一のアコーディオン

var acc = document.getElementsByClassName("accordion"); 
acc.onclick = function(){ 
    /* Toggle between adding and removing the "active" class, 
    to highlight the button that controls the panel */ 
    this.classList.toggle("active"); 

    /* Toggle between hiding and showing the active panel */ 
    var panel = this.nextElementSibling; 
    if (panel.style.display === "block") { 
     panel.style.display = "none"; 
    } else { 
     panel.style.display = "block"; 
    } 
    } 

または（単純jQueryの方法）

$('.accordian').on('click', function(){ 
    this.classList.toggle("active"); 
    var panel = this.nextElementSibling; 
    if (panel.style.display === "block") { 
     panel.style.display = "none"; 
    } else { 
     panel.style.display = "block"; 
    } 

}); 

彼らは3 accordianは、彼らがこのline.Thenに配列として保存されているclasses..so forループ内のすべての要素を取得してい

var acc = document.getElementsByClassName("accordion");