onClick无需点击即可关闭

我很喜欢用Javascript编写新内容，并且正在创建基本的选项卡导航界面作为原型/练习。现在，我试图使用onclick事件处理程序在无序链接列表中显示警报，就像测试一样，并且无法弄清楚。每次我加载页面时，所有5个onclick事件都不会点击任何内容。看看代码，让我知道如果您有任何建议：onClick无需点击即可关闭

window.onload = initAll; 
var xhr = false; 

function initAll() { 
    var navDiv = document.getElementById("tab_navigation"); 
    var navTabs = navDiv.getElementsByTagName("a"); 

    for (var i = 0; i < navTabs.length; i++) { 
     navTabs[i].onclick = tellTab(i); 
    } 
} 


function tellTab (number) { 
    number = number + 1; 
    alert("You clicked tab number " + number); 
}

的HTML结构如下：

<div id="tab_navigation"> 
     <ul> 
      <li><a href="#1">Tab 1</a></li> 
      <li><a href="#2">Tab 2</a></li> 
      <li><a href="#3">Tab 3</a></li> 
      <li><a href="#4">Tab 4</a></li> 
      <li><a href="#5">Tab 5</a></li> 
     </ul> 
    </div>

来源

2011-06-02 Eric

在for环，你有这样一行：

navTabs[i].onclick = tellTab(i);

立即调用tellTab。你可以做的是有tellTab回到封闭，像这样：

function tellTab (number) { 
    return function() { 
     // I commented out the following line 
     // because I don't think it's necessary. 
     //number = number + 1; 
     alert("You clicked tab number " + number); 
    }; 
}

不同的选项，创建for环路内闭合：

for (var i = 0; i < navTabs.length; i++) { 
    (function(i) { 
     navTabs[i].onclick = function() { 
      tellTab(i); 
     }; 
    })(i); 
}

来源

2011-06-02 01:59:24 icktoofay

只是一个诡辩：'tellTab'返回一个*函数*，它有一个* closure *给创建它的'tellTab'的实例。 'number = number + 1'行很重要，因为OP已经从1开始对LI进行索引，但'i'从零开始索引。 – RobG 2011-06-02 02:37:15

要添加到RobG的评论中，数字（不带+ 1）是选项卡的索引。所以“Tab 1”的索引为0，“Tab 2”的索引为1等。 – 2011-06-02 02:56:36

瓶盖傻瓜：

function initAll() { 
    var navDiv = document.getElementById("tab_navigation"); 
    var navTabs = navDiv.getElementsByTagName("a"); 

    for (var i = 0; i < navTabs.length; i++) { 
     setTabOnclick(navTabs[i], i); 
    } 
} 

function setTabOnclick(tab, i) { 
    tab.onclick = function() { tellTab(i); }; 
} 

function tellTab(i) { 
    alert('clicked tab ' + i); 
}

我刚刚意识到这与icktoofay的第二种解决方案相同，但具有命名的外部函数。

来源

2011-06-02 03:25:48 James

onClick无需点击即可关闭

回答

相关问题