同じクラスの要素で発生する1つの関数

Question

私はサブカテゴリとサブカテゴリのリストを持つカテゴリリストのコントロールをしようとしています。

<ul class="selectbox-ul"> 
    <li> 
     <div>Category</div> 
     <ul class="selectbox-ul-child"> 
      <li> 
       <div>Subcategory</div> 
       <ul class="selectbox-ul-child"> 
        <li> 
         <div>Sub-subcategory</div> 
        </li> 
       </ul> 
       <span id="trigger">icon</span> 
      </li> 
     </ul> 
     <span id="trigger">icon</span> 
    </li> 
    .... 
</ul> 

だから私のショットul.selectbox-UL-子供のためのクラスを追加しました：

var trigger = document.getElementById("trigger"); 

function subCatStatus() { 
    if(this.parentElement.children[1].className != "... expanded") { 
     this.parentElement.children[1].className += " expanded" 
    } else { 
     this.parentElement.children[1].className == "..." 
    }; 
}; 

trigger.addEventListener("click", subCatStatus); 

そして、それは最初スパン＃トリガーに対してのみ機能（

はここHTMLですサブカテゴリを表示する）、次のサブカテゴリは何もしません（私はまた、.getElementsByClassNameを使用しようとしましたが、トリガーのいずれにも機能しませんでした）。だから私はいくつかの説明をしたいのですが、なぜこれは動作しません。そしてそれを働かせる方法についてのアドバイス。

Answer 1

すでに述べたように、document.getElementById()は複数の値を返さないため、同じIDを持つ複数の要素をスタックすることはできません。

あなたはそれだけであなたの最初で動作しますので、次のコードにのみ単一の要素を返しますgetElementByIdを

var triggers = document.getElementsByClassName("trigger"); 

function subCatStatus() { 
    if(this.parentElement.children[1].className != "... expanded") { 
     this.parentElement.children[1].className += " expanded" 
    } else { 
     this.parentElement.children[1].className == "..." 
    }; 
}; 

for(var i = 0; i < triggers.length; i++) { 
    triggers[i].addEventListener("click", subCatStatus); 
} 

Answer 2

JavaScriptを代わりにIDのこれらのスパンのそれぞれに「トリガー」クラスを割り当て、試してみるの代わりにしようとするかもしれIDを持つ要素が見つかりました。

getElementsByClassNameは、同じクラスの検出された要素の配列を返します。したがって、要素のイベントにリスナーを追加する場合、この配列をループして個々に追加する必要があります。