javascript - 迭代对象数组并防止仅使用 javascript 的默认 anchor href 链接

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 中链接的网站，但会提醒网站创建者的名字和姓氏(包含在数组数据中)。

我已经设法阻止 anchor 标记的默认行为，但无法在点击函数中获取名字和姓氏。

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 将帮助我们创建一个作用域为 block 的变量，因此如果我们在这种情况下使用 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);
}

DEMO