Javascript 如何在不创建单独ID的情况下在多个项目上使用一个函数?
我有一个游戏,其中有气球,每个气球都有一个Javascript 如何在不创建单独ID的情况下在多个项目上使用一个函数?,javascript,Javascript,我有一个游戏,其中有气球,每个气球都有一个onclick属性,该属性将id传递到JS函数中以更改css 例如: <div id="balloon" class="container" onclick="popBalloon(this.id);"></div> 问题是,我有多个相同类型的引出序号,而不是为每个引出序号使用唯一的id,我希望有一种方法可以使用相同的属性名称确定正在单击的特定引出序号 这可能吗?如果将事件作为函数参数传递,则可以使用获取单击的元素 函数弹出气
onclick
属性,该属性将id传递到JS函数中以更改css
例如:
<div id="balloon" class="container" onclick="popBalloon(this.id);"></div>
问题是,我有多个相同类型的引出序号,而不是为每个引出序号使用唯一的id,我希望有一种方法可以使用相同的属性名称确定正在单击的特定引出序号
这可能吗?如果将
事件作为函数参数传递,则可以使用获取单击的元素
函数弹出气球(事件){
event.target.setAttribute(“class”、“pop”);
}
div{
边缘顶部:10px;
高度:30px;
宽度:30px;
边框:1px实心;
边界半径:50%;
}
.集装箱{
背景色:红色;
}
爸爸{
背景颜色:蓝色;
}
一个好方法是向所有引出序号添加一些类。让我们稍微修改一下您的代码
<div class="balloon"></div>
<div class="balloon"></div>
<div class="balloon"></div>
下面是如何向每个引出序号添加单击事件。不要在每个引出序号条目中手动输入函数签名,而是在下面的javascript中处理它。把所有这些气球都扔进一个列表。按照斯科特·亨特的建议,将每个气球放在一个班级里。让我们称之为“气球”。然后向每个引出序号添加一个事件侦听器。这里有一个快速演示
var-ballodarray=document.querySelectorAll(“.ballode”);
BalloodArray.forEach(函数(项){
item.addEventListener('单击',函数()){
item.innerText=“单击”;
});
});代码>
.container{
颜色:白色;
高度:80px;
利润率:10px;
文本对齐:居中;
}
点击我
点击我
单击我
当前大多数答案都建议使用一个函数来定义一组元素的单击侦听器,但是您询问如何在游戏中元素过多的情况下忽略唯一ID。简单的答案是将对象而不是ID传递给函数:
<div class="container" onclick="popBalloon(this);"></div>
function popBalloon(myobj){
myobj.setAttribute("class","pop");
}
仅此而已。这正是类方便使用的东西。getElementsByClassName()
返回该类的元素集合。.forEach()
使用querySelectorAll
返回的元素,您不需要数组。from()
在投票否决使用Array.from()的答案之前,您可能需要参考。我只是发布了一个在所有情况下都有效的解决方案。@Light您可能还想查看您在评论中添加的相同文档。在这里-是的,我看到了我的错误后,你已经张贴了你的初步评论-错过了,而获取网址,我担心
<div class="container" onclick="popBalloon(this);"></div>
function popBalloon(myobj){
myobj.setAttribute("class","pop");
}