我设置了这台鼓机:
每个按钮都会触发一个点击事件(播放音频剪辑),按下与按钮相同值的键也会触发一个按键事件(播放相同的音频剪辑并写入显示标签内)。
如何使点击事件也写入显示标记内?
<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;
}})
最佳答案
回调函数
回调函数是一个匿名或命名函数,一旦注册的事件被触发,就会调用它。以下演示具有一个名为 playMedia()
的回调函数这将处理 click
和keyup
来自 <button>
的事件和键盘。
顺便说一句,当加载 jQuery 时,永远不要使用内联属性事件处理程序——也称为事件处理程序——(例如 <button ... onclick="func()"...>
),就像在快艇上使用桨一样。与 jQuery 方法的强大功能和多功能性相比,事件处理程序更难维护,其范围和功能也受到限制。
HTML
有一些语义更改是可选的,例如:
- 每个
<div>
其中包含 3<buttons>
更改为<fieldset>
- 整个界面被包裹在
<fieldset>
中和一个<form>
<p>
和<div>
包裹在它周围的变成了<output>
和一个<legend>
分别。安<output>
将接受.value
中的值(jQ:.val()
)和.textContent
(jQ:.text()
) 属性。
所需的更改是:
- 每个
<button>
#id
是一个模式:- “b”和“共享字母” - 例如。
<button id="bQ"...>
- “b”和“共享字母” - 例如。
- 每个
<audio>
#id
是一个模式:- “a”和“共享字母” - 例如。
<audio id="aQ"...>
- “a”和“共享字母” - 例如。
- 每个
<button>
有一个名为:data-txt
的自定义属性其值显示在output#display
中
JavaScript/jQuery
有各种变化可以利用 #ids
<button>s
的和<audio>s
以及他们之间的关联。详细信息将在演示中注释。如果<audio>
标签运行但没有声音,请尝试查看此 functioning Plunker 相反。
演示
演示中评论了详细信息
如果<audio>
标签运行但没有声音,请尝试查看此 functioning Plunker相反。
<!doctype html>
<html>
<head>
<style>
html,
body {
font: 400 16px/1.5 Consolas
}
fieldset {
width: fit-content;
padding: 15px
}
legend {
font-size: 1.5rem
}
button {
width: 5ch;
text-align: center
}
output {
display: block;
}
</style>
</head>
<body>
<form id="drumMachine">
<fieldset class='mainControl'>
<legend>
<output id="display"> </output>
</legend>
<fieldset class="controls">
<button id="bQ" class="drum-pad" data-txt="Heater 1">
<audio class="clip" id="aQ" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" preload="auto"></audio>Q</button>
<button id="bW" class="drum-pad" data-txt="Heater 2">
<audio class="clip" id='aW' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" preload="auto"></audio>W</button>
<button id="bE" class="drum-pad" data-txt="Heater 3">
<audio class="clip" id='aE' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" preload="auto"></audio>E</button>
</fieldset>
<fieldset class="controls">
<button id="bA" class="drum-pad" data-txt="Heater 4">
<audio class="clip" id='aA' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" preload="auto"></audio>A</button>
<button id="bS" class="drum-pad" data-txt="Heater 5">
<audio class="clip" id='aS'src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"></audio>S</button>
<button id="bD" class="drum-pad" data-txt="Open HH">
<audio class="clip" id='aD'src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"></audio>D</button>
</fieldset>
<fieldset class="controls">
<button id="bZ" class="drum-pad" data-txt="KicknHat">
<audio class="clip" id='aZ'src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"></audio>Z</button>
<button id="bX" class="drum-pad" data-txt="Kick">
<audio class="clip" id='aX'src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"></audio>X</button>
<button id="bC" class="drum-pad" data-txt="Closed HH">
<audio class="clip" id='aC' src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"></audio>C</button>
</fieldset>
</fieldset>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// Callback function playMedia() handles both events
$(document).on('keyup', playMedia);
$('.drum-pad').on('click', playMedia);
function playMedia(e) {
/*
Prevent <form> from submitting data to a server when a <button>
is clicked. This behavior can also be prevented by adding:
type="button" to each <button> as well.
*/
e.preventDefault();
var letter, info;
// If the event.type is a click then...
if (e.type === 'click') {
// ...get the #id of the clicked node...
var ID = e.target.id;
// ...get the text in the clicked node's data-txt attribute
info = e.target.dataset.txt;
// Next split the text of the #id and keep the last letter
letter = ID.split('').pop();
// But if the event.type is a keyup...
} else if (e.type === 'keyup') {
/*
...get the keycode and run it through the switch() to
get the letter associated with a <button>/<audio> pair.
*/
switch (e.keyCode) {
case 81:
letter = "Q";
break;
case 87:
letter = "W";
break;
case 69:
letter = "E";
break;
case 65:
letter = "A";
break;
case 83:
letter = "S";
break;
case 68:
letter = "D";
break;
case 90:
letter = "Z";
break;
case 88:
letter = "X";
break;
case 67:
letter = "C";
break;
}
/*
Find the correct <button> and extract the text from its
data-txt attribute
*/
info = document.getElementById('b' + letter).dataset.txt;
} else {
// Otherwise end function
return false;
}
// Find the correct <audio>
var node = document.getElementById('a' + letter);
// Play <audio>
node.play();
/*
Set the value of output#display to the extracted text from
data-txt
*/
document.getElementById('display').value = info;
return false;
}
</script>
</body>
</html>
关于javascript - 每次单击按钮时都需要更新 p 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52730796/