Question

在此代码中，当按下键盘事件“A”时，其键码65应与＆gt;音频标签的属性data-key =“65”匹配并播放。但是当我在querySelector时，它在控制台日志中返回null。

<html>
    <head>
        <title>Drumkit</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale = 1.0"> 
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <audio data-key="65" src="audio/clap.wav"></audio>
        <audio data-key="83" src="audio/hihat.wav"></audio>
        <audio data-key="68" src="audio/kick.wav"></audio>
        <audio data-key="70" src="audio/openhat.wav"></audio>
        <audio data-key="71" src="audio/boom.wav"></audio>
        <audio data-key="72" src="audio/ride.wav"></audio>
        <audio data-key="74" src="audio/snare.wav"></audio>
        <audio data-key="75" src="audio/tom.wav"></audio>
        <audio data-key="76" src="audio/tink.wav"></audio>
      
        <script>
            window.addEventListener('keydown',function(e){
            const audio = document.querySelector('audio[data-key="${e.keyCode}"]');
           
            
            console.log(audio);
            });

        </script>
    </body>
</html>

Answer 1

要使用ES6一个Template-String，您需要使用`而不是＆＃39;。

您可能还需要阅读this文档。

＆＃13;

<html>
    <head>
        <title>Drumkit</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale = 1.0"> 
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <audio data-key="65" src="audio/clap.wav"></audio>
        <audio data-key="83" src="audio/hihat.wav"></audio>
        <audio data-key="68" src="audio/kick.wav"></audio>
        <audio data-key="70" src="audio/openhat.wav"></audio>
        <audio data-key="71" src="audio/boom.wav"></audio>
        <audio data-key="72" src="audio/ride.wav"></audio>
        <audio data-key="74" src="audio/snare.wav"></audio>
        <audio data-key="75" src="audio/tom.wav"></audio>
        <audio data-key="76" src="audio/tink.wav"></audio>
      
        <script>
            window.addEventListener('keydown',function(e){
            const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
           
            
            console.log(audio);
            });

        </script>
    </body>
</html>

＆＃13;

Answer 2

正如@ CodeF0x所指出的，您需要使用ES6模板字符串。因此，您需要使用反引号或反引号`而不是单引号＆＃39; ，可以在esc键下方的键上找到

但是，在querySelector()函数的情况下，字符串将无法在函数调用参数中正确插值。

因此，将模板字符串输出存储在变量中，并在函数调用中传递此变量，这将解决您的问题。

就这样使用

<html>
    <head>
        <title>Drumkit</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale = 1.0">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <audio data-key="65" src="audio/clap.wav"></audio>
        <audio data-key="83" src="audio/hihat.wav"></audio>
        <audio data-key="68" src="audio/kick.wav"></audio>
        <audio data-key="70" src="audio/openhat.wav"></audio>
        <audio data-key="71" src="audio/boom.wav"></audio>
        <audio data-key="72" src="audio/ride.wav"></audio>
        <audio data-key="74" src="audio/snare.wav"></audio>
        <audio data-key="75" src="audio/tom.wav"></audio>
        <audio data-key="76" src="audio/tink.wav"></audio>

        <script>
            window.addEventListener('keydown',function(e){
            var selector = `audio[data-key="${e.keyCode}"]`;
            const audio = document.querySelector(selector);

            console.log(audio);
            });

        </script>
    </body>
</html>

输出：如您所愿

请参阅Getting Literal With ES6 Template Strings获取更多帮助

在Keydown事件它应该播放匹配的音频

2 个答案: