Question

尝试转换遍历无序超链接列表的for循环，使用eventlistener为每个超链接添加一个'onclick'函数。我一直无法找到工作模式。

这是我正在使用的导航列表和链接，请注意，这些我无法以任何方式进行编辑或更改。

    <body>

<ul id="navlist">
    <li id="l0"> <a href="#">Sniffer</a>    </li>
    <li id="l1"> <a href="#">is</a> </li>
    <li id="l2"> <a href="#">good</a> </li>
    <li id="l3"> <a href="#">programmer</a> </li>
</ul>
<script>

var myLinks = [
                'http://bing.com/search?q=Sniffer',
                'http://bing.com/search?q=is',
                'http://bing.com/search?q=good',
                'http://bing.com/search?q=programmer'
                ];

以下是我要转换的代码示例：

window.onload=function() {

  for (var i=0; i< myLinks.length; i++) {
    // document.getElementById("l"+i).getElementsByTagName("a")[0]).href=myLinks[i];
      document.getElementById("l"+i).getElementsByTagName("a")[0].onclick=(function(idx) {
      var idx = i;
      return function() {  
        window.location.href = myLinks[idx]; 
        return false; // cancel href
        }; 
    })(i);      
  }
}
</script> 
</body>

我尝试了几种不同的格式化串联中特定文档元素的方法。但它们都不起作用。这是我最近和最简单的尝试：

window.onload=function() {

  for (var i=0; i< myLinks.length; i++) {
      document.getElementById("l"+i).addEventListener("click", function() {
      var idx = i;
      return function() {  
        window.location.href = myLinks[idx]; 
        return false; // cancel href
        }; 
    })(i);      
  }
}

我非常需要帮助，因为我已尝试使用此代码一段时间。我甚至不理解代码正在做什么才能转换为click事件。提前谢谢。

Answer 1

事件委托是解决此问题的一个很好的解决方案：

var myLinks = [
    'http://bing.com/search?q=Sniffer',
    'http://bing.com/search?q=is',
    'http://bing.com/search?q=good',
    'http://bing.com/search?q=programmer'
];

var list = document.getElementById('list');

list.addEventListener('click', function (event) {

    if (event.target && event.target.nodeName === "A") {
        event.preventDefault();
        var index = Array.prototype.indexOf.call(list.children, event.target.parentNode);
        var href = myLinks[index];
        console.log('link to ' + href + ' was clicked.');
        // window.location = href;
    }

});

Fiddle

Answer 2

你可以这样做：

var myLinks = [
    'http://bing.com/search?q=Sniffer',
    'http://bing.com/search?q=is',
    'http://bing.com/search?q=good',
    'http://bing.com/search?q=programmer'];

window.onload = function() {
    for (var i = 0, len = myLinks.length; i < len; i++) {
        document.getElementById("l" + i).addEventListener("click", (function (idx) {
            return function () {
                window.location.href = myLinks[idx];
                return false; // cancel href
            };
        })(i));
    }
};

addEventListener单击“无序列表”

2 个答案: