javascript - 一个脚本可实现多个按钮

Question

我有一个在工作中用来惹恼同事的音板。它有多个按钮，用于播放或停止声音。现在每个按钮都有自己的脚本来播放声音。所以我在页面上有多达 47 个声音，并且必须为每个声音编写这个脚本。我想清理它并拥有一个适用于所有这些的更智能的脚本。我的按钮看起来像:

<button onclick="javascript:toggleSound1();">I don't know what we're yelling about.</button>

然后我就有了音频元素的定义:

<audio id="sound1" src="sounds/dontknowwhatwereyellingabout.wav"></audio>

和脚本:

<script type="text/javascript">
function toggleSound1() {
  var audioElem = document.getElementById('sound1');
  if (audioElem.paused)
    audioElem.play();
  else
    audioElem.pause(); audioElem.currentTime = 0;
}
</script>

所以在我看来，如果我可以在每个按钮的按下时定义“sound1”，那么相同的脚本应该适用于每个按钮。现在我必须定义“sound1”“sound2”“sound3”等等，并为每个声音指定一个新的“togglesound”。

Answer 1

您可以重写toggleSound1来接受参数:

function toggleSound(num) {
  var audioElem = document.getElementById('sound' + num); // append the number to "sound" (sound1, sound2, etc.)
  if (audioElem.paused) {
    audioElem.play();
  } else {
    audioElem.pause();
  }
  audioElem.currentTime = 0;
}

然后要使用它，您只需将数字传递给函数即可:

<button onclick="javascript:toggleSound(1);">I don't know what we're yelling about.</button>