如何在不创建单独i的情况下在多个项目上使用一个函数？

Question

我有一个游戏，其中有气球，每个气球都有一个onclick属性，该属性将id传递给JS函数以更改css。

示例：

<div id="balloon" class="container" onclick="popBalloon(this.id);"></div>

单击此项目将调用下面的函数

function popBalloon(id){
    document.getElementById(id).setAttribute("class","pop");
}

问题是我有多个相同类型的气球，而不是为每个气球使用唯一的id，我想要一种方法来确定使用相同属性名单击的特定气球。

这可能吗？

Answer 1

大多数当前的答案都建议使用一个函数来定义一组元素的点击侦听器，但是您问到如何在游戏中有太多元素的情况下省略唯一in。简单的答案是将OBJECT而不是ID传递给函数：

<div class="container" onclick="popBalloon(this);"></div>

在函数中：

function popBalloon(myobj){
    myobj.setAttribute("class","pop");
}

这就是全部。

Answer 2

如果将event作为函数参数传递，则可以使用event.target获取单击的元素

​

function popBalloon (event) {
    event.target.setAttribute("class", "pop");
}

div {  
  margin-top: 10px;
  height: 30px;
  width: 30px;
  border: 1px solid;
  border-radius: 50%;
}

.container {
  background-color: red;
}

.pop {
  background-color: blue;
}

<div class="container" onclick="popBalloon(event);"></div>
<div class="container" onclick="popBalloon(event);"></div>
<div class="container" onclick="popBalloon(event);"></div>
<div class="container" onclick="popBalloon(event);"></div>
<div class="container" onclick="popBalloon(event);"></div>

​

Answer 3

一个很好的方法是给所有的气球添加一些类。让我们稍微修改一下代码

<div  class="balloon"></div>
<div  class="balloon"></div>
<div  class="balloon"></div>

我这里有3个这样的div和一类气球。对于我们能做的js

Array.from(document.querySelectorAll(".balloon")).forEach(balloon=>{
balloon.addEventListener('click',()=>{
//On click event here
});
});

下面是如何向每个气球添加单击事件。