回调函数

Question

我已经设置了这台鼓机：

每个按钮都会触发一个单击事件（播放一个音频剪辑），并且按下与按钮值相同的键也会触发一个按键事件（它播放相同的音频剪辑并在显示标签内写入）。

如何使点击事件也写在显示代码中？

<div id="drum-machine">
        <div id="display">
            <p id="displaytext"></p>
        </div>
            <div id="controls1">
            <button id="Heater1button" onclick="document.getElementById('Q').play();" class="drum-pad"><audio class="clip" id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" preload="auto"></audio>Q</button>
            <button id="Heater2button" class="drum-pad"><audio class="clip" id='W' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" preload="auto"></audio>W</button>
            <button id="Heater3button" onclick="document.getElementById('E').play();" class="drum-pad"><audio class="clip" id='E' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" preload="auto"></audio>E</button>
            </div>
        <div id="controls2">
            <button id="Heater4button" onclick="document.getElementById('A').play();" class="drum-pad"><audio class="clip" id='A' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" preload="auto"></audio>A</button>
            <button id="Heater6button" onclick="document.getElementById('S').play();" class="drum-pad"><audio class="clip" id='S'src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"></audio>S</button>
            <button id="OpenHHbutton" onclick="document.getElementById('D').play();" class="drum-pad"><audio class="clip" id='D'src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"></audio>D</button>
        </div>
        <div id="controls3">
        <button id="KicknHat" onclick="document.getElementById('Z').play();" class="
        drum-pad"><audio class="clip" id='Z'src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"></audio>Z</button>
        <button id="Kickbutton"onclick="document.getElementById('X').play();" class="drum-pad"><audio class="clip" id='X'src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"></audio>X</button>
        <button id="ClosedHHbutton"onclick="document.getElementById('C').play();" class="drum-pad"><audio class="clip" id='C' src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"></audio>C</button>
        </div>
    </div>

$(document).keydown(function(e){
            switch(e.keyCode){
                    case 81: document.getElementById('Q').play(),$("#displaytext").text("Heater 1")
break;
                    case 87: document.getElementById('W').play(),$("#displaytext").text("Heater 2")
break;
                    case 69: document.getElementById('E').play(),$("#displaytext").text("Heater 3")
break;
                    case 65: document.getElementById('A').play(),$("#displaytext").text("Heater 4")
break;
                    case 83: document.getElementById('S').play(),$("#displaytext").text("Heater 6")
break;
                   case 68: document.getElementById('D').play(),$("#displaytext").text("Open HH")
break;

                   case 90: document.getElementById('Z').play(),$("#displaytext").text("KicknHat")
break;
                   case 88: document.getElementById('X').play(),$("#displaytext").text("Kick")
break;
                   case 67: document.getElementById('C').play(),$("#displaytext").text("Closed HH")
break;
}})

Answer 1

最好分别声明函数并在两个地方使用它们

<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
</script>

<script>
function playQ() {
  $('#Q')[0].play();
  $('#displaytext').text('Heater 1');
}
</script>

<div id="drum-machine">
    <div id="display">
        <p id="displaytext"></p>
    </div>
    <div id="controls1">
        <button
            id="Heater1button"
            onclick="playQ()"
            class="drum-pad">
            Q
            <audio
                id="Q"
                class="clip"
                src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
                preload="auto"></audio>
        </button>
</div></div>



<script>
$(document).keydown(function(e){
  switch(e.keyCode) {
    case 81:
      playQ();
      break;
}});
</script>

可以用更少的代码进行更多的改进。

Answer 2

回调函数

回调函数是匿名或命名函数，一旦注册事件被触发，就会调用该函数。下面的演示具有称为playMedia()的回调函数，该函数将分别处理click和键盘上的keyup和<button>事件。

BTW永远不会在加载jQuery时使用内联属性事件处理程序（也称为事件处理程序）（例如<button ... onclick="func()"...>），就像在快艇中使用桨一样。与jQuery方法的强大功能和多功能性相比，事件处理程序更难以维护，范围和功能受到限制。

HTML

有些语义更改是可选的，例如：

每个包含3个<div>的{{1}}都变成了一个<buttons>
整个界面都包裹在<fieldset>和<fieldset>
包裹在其上的<form>和<p>分别更改为<div>和<output>。 <legend>将接受<output>（jQ：.value）和.val()（jQ：.textContent）属性中的值。

所需的更改是：

每个.text() <button>是一个模式：
- “ b”和“共享字母” -例如。 #id
每个<button id="bQ"...> <audio>是一个模式：
- “ a”和“共享字母” -例如。 #id
每个<audio id="aQ"...>都有一个名为<button>的自定义属性，其值显示在data-txt中

JavaScript / jQuery

为了利用output#display和#ids中的<button>s以及它们之间的关联，进行了各种更改。详细信息将在演示中进行评论。如果<audio>s标签运行但没有声音，请尝试查看此 functioning Plunker 。

演示

演示中评论的详细信息
如果<audio>标签运行但没有声音，请尝试查看此functioning Plunker。

<audio>

每次单击按钮时都需要更新p标签

2 个答案:

回调函数

HTML

JavaScript / jQuery

演示