Question

我从Json文件中生成一张Magic卡列表。

for (i in set.cards) {
        leftCardElement = document.createElement("p");
        leftCardElement.innerHTML = set.cards[i].points + "&nbsp;" + set.cards[i].name + "&nbsp";
        leftCardElement.addEventListener("click", leftCardClicked);
}

 function leftCardClicked(event) {// access card.cost and other things }

问题在于，当调用leftCardElementClicked()方法时，我希望能够访问set.cards[i]对象。 this对象似乎是指我在leftCardElementClicked()内部点击的元素。有没有什么方法可以将索引i传递给事件处理程序，以便我可以获取我的卡对象？

Answer 1

与@AlejandroC相同，但不依赖于i（每次迭代时此i都会改变），因此我在传递之前克隆它，使用Object.assign()

在for循环中执行：

leftCardElement.addEventListener("click", leftCardClicked.bind(this, Object.assign({},set.cards[i]));

然后你的功能应该是：

function leftCardClicked(card, event) { ... }

Answer 2

在for循环中执行：

leftCardElement.addEventListener("click", leftCardClicked.bind(this, set.cards[i]);

然后你的功能应该是：

function leftCardClicked(card, event) { ... }

Answer 3

而不是将leftCardClicked直接作为事件处理程序附加，而是使用匿名函数：

leftCardElement.addEventListener("click", function(evt) {
  leftCardClicked(evt,i);
});

其中i是你的循环索引。这会创建一个闭包，将i的值传递给click处理程序的实例。

如何在Javascript中通过eventListener传递int？

3 个答案: