javascript - 以编程方式添加 javascript 到动态生成的具有相同 id 的超链接

Question

可能是一个奇怪的设置，但我在页面上有许多具有相同 id 的超链接(是的，我知道，但这不是我的选择，目前我无法更改，而且这些超链接是动态生成的) .

示例:

<div id="Links">
    <div class="myItem"><a href="#" id="myLink" LinkID="101">Some text</a></div>
    <div class="myItem"><a href="#" id="myLink" LinkID="102">More text</a></div>
    <div class="myItem"><a href="#" id="myLink" LinkID="103">Even more text</a></div>
</div>

现在我需要将 javascript 动态附加到这些链接(超链接也是动态生成的)。我看到的最简单的方法是获取页面上的所有超链接，然后检查超链接 id 以确保我只处理那些 id 为“myLink”的超链接(页面上还有许多其他超链接)。我想过使用 getElementById 但这只会获取具有指定 id 的第一个元素。

我使用以下代码将 JavaScript 附加到这些链接:

 window.onload = function() {
    var anchors = document.getElementsByTagName('a');

    for(var i = 0; i < anchors.length; i++) {
        var anchor = anchors[i];

    if (anchor.id='myLink')
    {
        if (anchor.getAttribute("LinkID") != null)
        {

            anchor.onclick = function() {           
                MyFunction(this.getAttribute("LinkID"), false);
                return false;   
            }
         }
    }
  }
}

上述函数工作正常，但它产生了另一个问题 - 影响页面上其他超链接的样式。所以我想知道是否有一种方法可以完成同样的事情，但不影响页面上的其他元素？

Answer 1

这更现代，可以纠正您的平等测试:

window.onload = function() {
     var anchors = document.getElementsByTagName('a');

     for(var i = 0; i < anchors.length; i++) {

       if (anchor[i].id==='myLink' && anchor[i].getAttribute("LinkID") !== null)
       {
           anchor[i].addEventListener("click", function() {           
                 MyFunction(this.getAttribute("LinkID"), false);   
           }
       }
     }
 }

即使使用您的原始代码，我也没有看到任何会干扰代码样式的内容。您能详细说明一下您进行了哪些样式更改吗？