Question

我正在尝试创建一个适用于多个选择的单个函数。我正在创建一个视频游戏的选择屏幕，它应该像这样工作：https://oege.ie.hva.nl/~meestej005/eind/

我实现这一目标的方法是使用以下代码：

function character1(){
for (var i = 0; i < sprite.length; i++){
    sprite[i].classList.remove('charSprite');
}
sprite[0].classList.add('charSprite');
hadouken.play();
}

我做了4次这个功能，每个角色一个。他们被称为：

char1.addEventListener('click', character1);

现在，我想创建一个为每个角色执行此操作的函数。这就是我想出的：

function character(name, music){
for (var i = 0; i < sprite.length; i++){
    sprite[i].classList.remove('charSprite');
}
name.classList.add('charSprite');
music.play();
}

char1.addEventListener('click', character(charSprite1, hadouken));

可悲的是，这不起作用。现在单击其中一个字符就会产生任何结果，甚至不会出现错误。所以我做错了什么，但不知道是什么。我想只使用Javascript解决这个问题。我希望你们能帮助我。感谢。

Answer 1

addEventListener将函数作为其第二个参数。当您调用character(charSprite1, hadouken)之类的函数时，您不再传递该函数引用（而是传递该函数的结果，该函数立即被称为而不是事件火灾）。我建议使用闭包捕获name和music参数，并且每次从character返回一个函数：

function character(name, music) {
  return function() {
    for (var i = 0; i < sprite.length; i++) {
      sprite[i].classList.remove('charSprite');
    }
    name.classList.add('charSprite');
    music.play();
  }
}

char1.addEventListener('click', character(charSprite1, hadouken));

将带参数的函数传递给`addEventListener`

1 个答案: