事件目標 - 針對所有div，在nextSibling中使用類名？

Question

JavaScript新功能...

我試圖建立一個事件處理程序，它將一組鏈接的tabIndex設置爲0，當它被點擊時......我不確定如何精確定位。

例子：

<div id="a">Link</div> 
<div id="b"> 
    <div class="link" tabIndex="-1">Link 1</div> 
    <div class="link" tabIndex="-1">Link 2</div> 
    <div class="link" tabIndex="-1">Link 3</div> 
</div> 

進出口尋找離子如何定位都與#B類「聯繫」的div當我點擊#A。

任何意見讚賞！

Answer 1

除了已經給出答案，我不建議利用一個更有意義的標記，如果可用/可能採取的一大優勢現代的DOM。

function nullifyTabIndex(elmNode) { 
 
    elmNode.setAttribute('tabindex', 0); 
 
} 
 
function handleNullifyTabIndices(evt) { 
 
    var 
 
    tabItemList = document.body.querySelectorAll('#b > li'); 
 

 
    tabItemList.forEach(nullifyTabIndex); 
 
} 
 
function registerHandlingOfTabindexChange(evt) { 
 
    var 
 
    elmTrigger = document.body.querySelector('#a'); 
 

 
    elmTrigger.addEventListener('click', handleNullifyTabIndices, false); 
 
} 
 
document.addEventListener('DOMContentLoaded', registerHandlingOfTabindexChange, false);

<a href="#" id="a">Trigger Tab Index Change</a> 
 
<nav> 
 
    <ul id="b"> 
 
    <li tabindex="-1"><a href="#">Link 1</a></li> 
 
    <li tabindex="-1"><a href="#">Link 2</a></li> 
 
    <li tabindex="-1"><a href="#">Link 3</a></li> 
 
    </ul> 
 
</nav>

Answer 2

以下內容應該對您有所幫助。

HTML：

<div id="a">Link</div> 
<div id="b"> 
    <div class="link" tabIndex="-1">Link 1</div> 
    <div class="link" tabIndex="-1">Link 2</div> 
    <div class="link" tabIndex="-1">Link 3</div> 
</div> 

JS：

<script> 
window.onload = function() { test() }; //Call the test function below on load 

function test() { 
    document.getElementById("a").addEventListener("click", updateAttribute); //attach event listener to div with id "a" 
} 

function updateAttribute() 
{ 
    var ele = document.getElementsByClassName("link"); //Get all div elements with class name "link" under div "b" 

    for(var i = 0; i < ele.length; i++) //Loop through all div elements and set attribute "tabIndex" to "0" 
     ele[i].setAttribute("tabIndex", "0"); 
} 
</script>