如果在函数中根据id

Question

我希望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>

Answer 1

您可以添加thisinto 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>

Answer 2

尽量不要使用内联 JavaScript 来了解更多不应该使用它只是解决这个问题所以由于以上原因只需使用一个addEventListener或使用侦听器赋值就像id.onclick = function(){}... 这里是一个

例子

var sound1 = document.getElementById("audio1");

var sound2 = document.getElementById("audio2");

var x = document.getElementById("x");

var y = document.getElementById("y");

x.onmouseover = () => {

  sound1.play();

}

x.onmouseout = () => {

  sound1.pause();

}

y.onmouseover = () => {

  sound2.play();

}

y.onmouseout = () => {

  sound2.pause();

}

<a href="Okokoska.html"><img src="Pkokoska.jpg"></a>

<a href="Okonj.html"><img src="Pkonj.jpg" id="y"></a>

<audio id="audio1"><source src="Zkokoska.wav"></audio>

<audio id="audio2"><source src="Zkrava.wav"></audio>

或者你也可以看到下面的例子希望你会发现它有帮助

var button = document.getElementById("button");

var audio = document.getElementById("player");

button.addEventListener("mouseover", function() {

  audio.play();

  button.innerHTML = "Play";

});

button.addEventListener("mouseout", function() {

  audio.pause();

  button.innerHTML = "Pause";

});

div {

  display: block;

  cursor: pointer;

  width: 50px;

  height: 50px;

  background-color: #000000;

}

button {

  cursor: pointer;

  font-family: Tahoma;

  font-weight: bold;

  font-size: 14px;

  background-color: #00ffff;

  color: blue;

  padding: 13px 6px;

}

<div>

  <button id="button">Play</button>

</div>

<audio id="player">

  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>

</audio>

Answer 3

通过onclick将事件作为参数传递到绑定到img标记的playSound函数中，并在您的逻辑中访问它以验证 Id。

HTML

<a href="Okokoska.html"><img src="Pkokoska.jpg" id="x" onmouseover="playSound(event)" onmouseout="stop()"></a>

<a href="Okonj.html"><img src="Pkonj.jpg" id="y" onmouseover="playSound(event)" onmouseout="stop()"></a>

<audio id="audio1"><source src="Zkokoska.wav"></audio>

<audio id="audio2"><source src="Zkrava.wav"></audio>

JavaScript

var sound1 = document.getElementById("audio1");

var sound2 = document.getElementById("audio2");

function playSound(event) {

  if(event.target.id == "x"){

    sound1.play(); 

  }else if(event.target.id == "y"){

    sound2.play();

  }

}

Answer 4

我很早就不喜欢剧本了，但你试过这个吗（我没试过）？

function playSound(){

document.getElementById("x").addEventListener("click", function(){ document.getElementById("audio1").play()[0]; });

document.getElementById("y").addEventListener("click", function(){ document.getElementById("audio2").play()[0]; });

}