一個函數在同一類的元素上點擊點擊

我試圖使用子類別和子子類別列表對類別列表進行控制。

這裏的HTML：一個函數在同一類的元素上點擊點擊

<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);

而且它僅適用於第一跨度＃觸發（顯示子類別），下一個（對於子子類別）什麼都不做（我也嘗試使用.getElementsByClassName它不適用於任何觸發器）。所以我想得到一些解釋爲什麼這個不工作。還有一些建議如何使其工作。

來源

2017-01-13 m aksem

由於id應該是唯一的，所以你應該只有一個'＃trigger' – Musa

你不應該有許多具有相同id的元素。你需要使用不同的選擇器，如類名，並迭代匹配元素添加事件監聽器 –

**原因**爲什麼有2個元素具有相同的ID是壞的，除了它是無效的Html，是因爲[** getElementById **]（https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById）只返回一個元素而不是一個HtmlCollection，這意味着它會返回它遇到的第一個元素。 – Nope

正如其他人已經提到的，你不能堆疊具有相同ID的多個元素，因爲document.getElementById()不應該返回多個值。

您可以嘗試，而不是在「觸發」類分配給每個那些跨度，而不是ID的，然後嘗試下面的代碼

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); 
}

來源

2017-01-13 15:09:32 Domenico

的JavaScript的getElementById只返回單個元素，因此將只與你的第一個工作找到帶有ID的元素。

getElementsByClassName返回一個具有相同類的已找到元素的數組，因此在向元素上的事件添加偵聽器時，您需要遍歷該數組並逐個添加到該元素。

來源

2017-01-13 15:10:14

一個函數在同一類的元素上點擊點擊

回答

相關問題