如何在用戶點擊時在特定「li」上添加活動類

Question

我已經在網上搜索了一個簡單的答案，但我一直無法找到它。花費太長時間試圖弄清楚這一點，但我會感謝任何幫助或正確的方向。

HTML

<ul id="main-li"> 
    <li>item1</li> 
    <li>item1</li> 
    <li>item1</li> 
</ul> 

的JavaScript：

document.getElementById('main-li').addEventListener("click", function(e) { 
    if (e.target && e.target.nodeName === "LI") { 
    e.target.classList.add("active-class"); 
    } 
}); 

的jsfiddle https://jsfiddle.net/kw0rr3fv/1/

據大衛洗：https://davidwalsh.name/event-delegate

事件代理允許您避免將事件偵聽器添加到 特定節點;相反，事件監聽器被添加到一個父代。 這一事件監聽器分析冒泡事件對孩子找到一個匹配 元素

的是換掉以前的活動類，而類連接到所選元素的最佳方法是什麼？

Answer 1

唯一的辦法繼續UL的孩子將重複他們。

如果你想避免像jQuery框架，你可以簡單地用很短的代碼實現它：

document.getElementById('main-li').addEventListener("click", function(e) { 
    if (e.target && e.target.nodeName === "LI") { 
     let elements = document.getElementById('main-li').children; 
     for (let i = 0; i < elements.length; ++i) { 
      elements[i].classList.remove("active-class"); 
     } 
     e.target.classList.add("active-class"); 
    } 
}, true); 

正如你看到的我只是增加了一個很短的循環，你的代碼，刪除類（它在元素沒有類的情況下不會阻塞）。

在代碼的最後一行，你可能會注意到我添加了一個true值：這是使用捕捉，用來表明UL事件必須由李兒童被捕獲。

Answer 2

我發現這比我預期的更具挑戰性。這是一種常見的 方式來設置活動類嗎？

您可以使用像jQuery這樣的框架，它可以幫助您以更快的速度和跨瀏覽器的方式進行操作。

什麼是最好的方式來刪除以前的活動類，而 附加到選定的元素？

檢查更新fiddle

document.getElementById('main-li').addEventListener("click", function(e) { 
    console.log(e); 
    Array.prototype.slice.call(document.querySelectorAll('#main-li li')).forEach(function(obj){ 
    obj.classList.remove("active-class"); 
    }); 
    if (e.target && e.target.nodeName === "LI") { 
    e.target.classList.add("active-class"); 
    } 
}); 

您需要從刪除類的所有立的第一個，然後用添加存在刪除類各active-class

Answer 3

您也可以使用Jquery來做到這一點。這比你的代碼快而短。

$(document).ready(function(){ 
$('#main-li').on('click',function(){ 
$(this).addClass('active-class').siblings().removeClass('active-class'); 
}); 
}); 

Answer 4

在每個「li」元素上單擊添加類「活動」的創建頁面。

<style> 
 
\t .active { color: red; } 
 
</style> 
 

 
<ul> 
 
    <li>item1</li> 
 
    <li>item2</li> 
 
    <li>item3</li> 
 
</ul> 
 

 
<script> 
 
var arr = document.getElementsByTagName("li"); 
 

 
for(var i=0; i<arr.length; i++){ 
 
\t arr[i].addEventListener("click", function(){ 
 
\t 
 
\t \t \t for(var j=0; j<document.getElementsByTagName("li").length; j++){ 
 
\t \t \t \t document.getElementsByTagName("li")[j].className = ""; 
 
\t \t \t \t event.target.className = ""; 
 
\t \t \t }; 
 
\t 
 
\t \t event.target.className = "active" 
 
\t }); 
 
} 
 
</script>

Answer 5

我認爲應該只關注標籤「禮」，並添加事件監聽器作爲我簡單的代碼，容易下方閱讀。

var elementsLi = document.querySelectorAll('ul#main-li > li'); 

for (var i = 0; i < elementsLi.length; i++) { 
    elementsLi[i].addEventListener('click', function(e) { 
     // console.log(e.currentTarget); // for see the current element 
     if (e.currentTarget.classList.contains('active-class')) { 
       // do something if already have class "active-class" 
       // remove class or blah blah blah 
     } 
     else { 
       e.currentTarget.classList.add('active-class') 
     } 
    }); 
} 

希望你成功:)