javascript - 如果在函数中根据 id
问题描述
我希望playSound()
函数根据id
选择的(悬停的)图像来完成它的工作。我尝试过的任何事情都没有成功,所以我需要全力帮助。
代码:
var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");
function playSound() {
//if hovered image has id="x", do this
sound1.play();
//if hovered image has id="y", do this
sound2.play();
}
<a href="Okokoska.html"><img src="Pkokoska.jpg" id="x" onmouseover="playSound()" onmouseout="stop()"></a>
<a href="Okonj.html"><img src="Pkonj.jpg" id="y" onmouseover="playSound()" onmouseout="stop()"></a>
<audio id="audio1"><source src="Zkokoska.wav"></audio>
<audio id="audio2"><source src="Zkrava.wav"></audio>
解决方案
您可以添加this
到onmouseover="playSound(this)"
,这将传递一个悬停的元素。
然后你在函数中捕获它:
function playSound(e) {
并用来保存id,然后只做if语句。
let id = e.id;
var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");
function playSound(e) {
console.clear();
console.log(e.id);
let id = e.id;
if (id === "x") {
//if hovered image has id="x", do this
sound1.play();
console.log("Playing sound x");
} else if (id === "y") {
//if hovered image has id="y", do this
sound2.play();
console.log("Playing sound y");
}
}
<a href="Okokoska.html"><img src="Pkokoska.jpg" id="x" onmouseover="playSound(this)" onmouseout="stop()"></a>
<a href="Okonj.html"><img src="Pkonj.jpg" id="y" onmouseover="playSound(this)" onmouseout="stop()"></a>
<audio id="audio1"><source src="Zkokoska.wav"></audio>
<audio id="audio2"><source src="Zkrava.wav"></audio>
推荐阅读
- domain-driven-design - DDD - 将商品添加到订单/收据时的价格计算
- html - 引导阴影未显示在 nav.shadow 上
- java - 使用 setVisible 方法控制可见性时出错
- javascript - 如何使标记动态地标记进度的任何位置
- sql-server - 性能调整获取 Max Value 的详细信息
- python - 从两个文件中按升序显示时间
- react-native - 尝试在 React Native 中更改我的不可变数组
- javascript - Favicon 未在 IE11 中为 Angular 7 应用程序呈现
- java - 使用迭代器从 ArrayList 中删除元素
- android - Volley StringRequest 发送参数 POST 方法