javascript - 如何在不创建单独 ID 的情况下将一个功能用于多个项目?
问题描述
我有一个游戏,其中有气球,每个气球都有一个onclick
属性,该属性将 id 传递给 JS 函数以更改 css。
例子:
<div id="balloon" class="container" onclick="popBalloon(this.id);"></div>
点击此项会调用下面的函数
function popBalloon(id){
document.getElementById(id).setAttribute("class","pop");
}
问题是我有多个相同类型的气球,而不是为每个气球使用唯一的 id,我想要一种方法来确定使用相同属性名称单击的特定气球。
这可能吗?
解决方案
如果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>
推荐阅读
- python - 如何在完成工作后删除键绑定
- node.js - Electron 窗口可以使用 Windows 身份验证登录 SSO 吗?
- ios - 为什么 Swift/Core Location 显示我的纬度/经度位置在旧金山——即使我在纽约?
- c++ - 我可以更改 Xcode 创建 Playground 的语言吗?
- javascript - 仅在移动设备上使用某些 JavaScript 代码?
- terminal - zsh:找不到命令:原子
- algorithm - 从 O(1) 空间中的流中选择随机项
- gojs - 如何向 gojs 平面图调色板添加新形状
- docker - 在容器之间传递 docker URL
- postgresql - 配置 Kafka 连接 Postgress Debezium CDC 插件