问题：为什么onclick事件能正确获取到我点的是数组哪个元素，还有下标。（tab，tabPos）for循环至setTabHandler(tab, i)，执行函数 循环调用3次该函数，它不是直接循环完了吗？这段javascript代码应该不是从我点击开始onclick事件才执行的吧？</style></head><body><section class="info-box"> <ul> <li><a class="active" href="#" >Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> </ul> <div class="panels"> <article class="active-panel"> <h2>The first tab</h2> <p >1Lorem ipsum dolor sit amet,</p> </article> <article> <h2>The second tab</h2> <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p> </article> <article> <h2>The third tab</h2> <p>3Lorem ipsum dolor sit </p> <ol> <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> <li>Aliquam ut porttitor urna.</li> <li>Nulla facilisi</li> </ol> </article> </div></section><script> var tabs = document.querySelectorAll('.info-box li a'); var panels = document.querySelectorAll('.info-box article');for(i = 0; i < tabs.length; i++) { var tab = tabs[i]; setTabHandler(tab, i);}function setTabHandler(tab, tabPos) { tab.onclick = function() { alert(tabPos); for(i = 0; i < tabs.length; i++) { if(tabs[i].getAttribute('class')) { tabs[i].removeAttribute('class'); } } tab.setAttribute('class', 'demo'); for(i = 0; i < panels.length; i++) { if(panels[i].getAttribute('class')) { panels[i].removeAttribute('class'); } } panels[tabPos].setAttribute('class', 'active-panel'); }}</script> </body></html>
3 回答
慕丝7291255
TA贡献1859条经验 获得超6个赞
为什么onclick事件能正确获取到我点的是数组哪个元素，还有下标。（tab，tabPos）
因为一开始就已经通过循环把 元素 和 下标 传递给 setHandler 了。
for循环至setTabHandler(tab, i)，执行函数 循环调用3次该函数，它不是直接循环完了吗？
每循环一次就给对应下标的元素注册监听函数，然后就结束了这没错。
这段javascript代码应该不是从我点击开始onclick事件才执行的吧？
只有 tab.onclick = function () { ... } 这一段是你点击后才执行的，其他的都是页面一加载完就执行了。
GCT1015
TA贡献1827条经验 获得超4个赞
为什么onclick事件能正确获取到我点的是数组哪个元素，还有下标。（tab，tabPos）
这牵涉到执行顺序，因变数在一开始就给值，所以下方已经注册 tabs, panels
for循环至setTabHandler(tab, i)，执行函数 循环调用3次该函数，它不是直接循环完了吗？
确实循环完了，但因 setTabHandler 中注册了 onclick 事件，所以后续 tab 被点击时会触发已被注册的 onclick 事件
这段javascript代码应该不是从我点击开始onclick事件才执行的吧？
setTabHandler 在程式第一次执行时就被呼叫，后续点击时触发的是
function() {
alert(tabPos);
for(i = 0; i < tabs.length; i++) {
if(tabs[i].getAttribute('class')) {
tabs[i].removeAttribute('class');
}
}
tab.setAttribute('class', 'demo');
for(i = 0; i < panels.length; i++) {
if(panels[i].getAttribute('class')) {
panels[i].removeAttribute('class');
}
}
panels[tabPos].setAttribute('class', 'active-panel');
}
这段程式码
添加回答
举报
0/150
提交
取消