Question

var people = [
  { firstname:"Micro",  lastname:"Soft", site:"http://microsoft.com" },
  { firstname:"Face",   lastname:"Book", site:"http://facebook.com" },
  { firstname:"App",    lastname:"Le",   site:"http://apple.com" },
  { firstname:"Master", lastname:"Card", site:"http://mastercard.com" }
];

以及DOM中的以下列表：

<ul id="people">
  <li><a href="http://microsoft.com">microsoft.com</a></li>
  <li><a href="http://facebook.com">facebook.com</a></li>
  <li><a href="http://apple.com">apple.com</a></li>
  <li><a href="http://mastercard.com">mastercard.com</a></li>
</ul>

假设数组中项目的顺序与列表中列表项的顺序相匹配（如上所述），请将必要的事件处理程序附加到DOM，以便单击任何这些链接将不会将您带到在href中链接的网站，但会提醒创建网站的人的名字和姓氏（包含在数组数据中）。

我已设法阻止锚标记的默认行为，但无法在点击功能中获取第一名和姓氏。

var listElements = document.getElementById("people").getElementsByTagName("A");
var people = [
  { firstname:"Micro",  lastname:"Soft", site:"http://microsoft.com" },
  { firstname:"Face",   lastname:"Book", site:"http://facebook.com" },
  { firstname:"App",    lastname:"Le",   site:"http://apple.com" },
  { firstname:"Master", lastname:"Card", site:"http://mastercard.com" }
];
for (var i = 0; i < people.length; i++) {
            listElements[i].addEventListener('click', function (event, i) {
              event.preventDefault();
            });
        }

<ul id="people">
  <li><a href="http://microsoft.com">microsoft.com</a></li>
  <li><a href="http://facebook.com">facebook.com</a></li>
  <li><a href="http://apple.com">apple.com</a></li>
  <li><a href="http://mastercard.com">mastercard.com</a></li>
</ul>

有人可以帮助我在点击功能中获取firstname和lastname吗？

Answer 1

您可以使用let并重写您的代码，如下所示，

for (let i = 0; i < people.length; i++) {
  listElements[i].addEventListener('click', function(event) {
    event.preventDefault();
    console.log(people[i].firstname,people[i].lastname);
  });
}

基本上let将帮助我们创建一个作用于块的变量，因此如果我们在此上下文中使用let，则闭包引起的问题不会对我们造成伤害。

DEMO

如果你的环境不支持ES6，那么尝试每次迭代创建一个范围，如下所示，

for (var i = 0; i < people.length; i++) {
  (function(i){
    listElements[i].addEventListener('click', function(event) {
      event.preventDefault();
      console.log(people[i].firstname,people[i].lastname);
    });
  })(i);
}

迭代对象数组并使用javascript防止默认锚点href链接

1 个答案:

DEMO

DEMO