的addEventListener到元素和元素的目标数组的数组

window.onload = function() { 
    // set default for landing page: 
    window.location.replace("#Overview"); 
    // register click event listener for top navigation: 
    var navBarButtons = ["class1","class2","class3","class4","class5","class6","class7","class8","class9"]; 
    var navBarTargets = ["id1","id2","id3","id4","id5","id6","id7","id8","id9"]; 
    registerNavBar(navBarButtons, navBarTargets); 
} 
function registerNavBar(navBarButtons, navBarTargets){ 
    for (var i=0; i<navBarButtons.length; i++){ 
     sourceElement=document.querySelector("#left_nav .".concat(navBarButtons[i])); 
     sourceElement.addEventListener("click",clickNavBarButton({targets:navBarTargets,index:i})) 
    } 
} 
function clickNavBarButton(event){ 
    clearPages(event.targets); 
    document.querySelector("#".concat(event.targets[event.index])).classList.add("active"); 
} 
function clearPages(navBarTargets) { 
    for (i=0; i<navBarTargets.length; i++){ 
     var target = "#".concat(navBarTargets[i]),classList=document.querySelector(target).classList; 
     if (classList.contains("active")){ 
      classList.remove("active") 
     } 
    } 
}

我试着去添加一个onclick事件的元素在我的导航栏，看起来像这样：的addEventListener到元素和元素的目标数组的数组

<div id="left_nav"> 
       <a href="#Overview" title="Overview"><span class="class1"></span></a>

的registerNavBar（）函数无法添加onclick事件到由#left_nav .classn选择器返回的元素。该.active类定义为

.active { 
    display: block!important 
}

而默认状态是

display: none

因此添加/去除。有源类切换的可见性。使用外部库不是一种选择。

目前循环中的所有功能都是在没有抛出错误的情况下执行的，我最终显示了＃id9 beeing的元素，但按钮不会在单击时触发onclick事件。如何正确添加eventListeners到数组中的所有元素？

来源

2016-08-01 Niko

你调用该函数，而不是传递的。使用'.bind（）'是一个简单的解决方案。 'sourceElement.addEventListener（“click”，clickNavBarButton.bind（sourceElement，{targets：navBarTargets，index：i}））' – 2016-08-01 12:27:41

并将'clickNavBarButton'中的参数名称从'event'更改为其他内容，因为这不是实际的事件对象。 – 2016-08-01 12:28:44

您可以创建一个closure保持事件对象数据

function registerNavBar(navBarButtons, navBarTargets){ 
    for (var i=0; i<navBarButtons.length; i++){ 
     sourceElement=document.querySelector("#left_nav .".concat(navBarButtons[i])); 
     sourceElement.addEventListener("click",clickNavBarButton({targets:navBarTargets,index:i})) 
    } 
} 
function clickNavBarButton(event){ 
    return function(){ 
    clearPages(event.targets); 
    document.querySelector("#".concat(event.targets[event.index])).classList.add("active"); 
    } 
}

来源

2016-08-01 13:00:38

的addEventListener到元素和元素的目标数组的数组

回答

相关问题