事件目标 - 针对所有div，在nextSibling中使用类名？

-2

JavaScript新功能...事件目标 - 针对所有div，在nextSibling中使用类名？

我试图建立一个事件处理程序，它将一组链接的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。

任何意见赞赏！

来源

2017-08-29 Ky Lane

那么，有什么问题呢？绑定首先听的事件？寻找你想改变的元素？一旦你找到属性，设置属性？首先将JS加载到页面中？您迄今为止提供的代码表明您应该查看[JS简介]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide），而不是要求您写出您的代码给你。 – Quentin

我在问如何针对#b中的div，因为我有点迷路。 –

除了已经给出答案，我不建议利用一个更有意义的标记，如果可用/可能采取的一大优势现代的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>

来源

2017-08-29 09:39:42

以下内容应该对您有所帮助。

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>

来源

2017-08-29 08:42:35

谢谢先生。非常感谢。 –

事件目标 - 针对所有div，在nextSibling中使用类名？

回答

相关问题