HTML5 data- *属性上的querySelector（）函数错误
[英]error for querySelector() function on HTML5 data-* attribute
问题描述
I am trying to create a simple piano with all the sounds such as Do, Re, Mi etc using Vanilla Js. 
我正在尝试使用Vanilla Js创建具有所有声音（如Do，Re，Mi等）的简单钢琴。 I am getting error regarding the querySelector function for data-* attribute. 我收到有关data- *属性的querySelector函数的错误。 Here is the relevant part of my code. 这是我的代码的相关部分。
let keyArr = document.querySelectorAll(".musicKey"); var audioKeyProp; keyArr.forEach(function(item) { let tempVal = item.getAttribute('data-key'); audioKeyProp[tempVal] = document.querySelector(`audio[data-key=${tempVal}]`); //For debugging console.log(audioKeyProp[tempVal]); });
<body> <div id="main-div"> <div class="keys"> <div data-key="100" class="musicKey"> <p>D</p><span>(Do)</span></div> <div data-key="114" class="musicKey"> <p>R</p><span>(Re)</span></div> <!--there are more such div. To make it simple I only mentioned two --> </div> </div> <audio data-key="100" src="audio/do.mp3" type="audio/mpeg"></audio> <audio data-key="114" src="audio/re.mp3" type="audio/mpeg"></audio> <!--there are more such audio elements. To make it simple I only mentioned two --> </body>
I want to get the sound upon each key press.At first I want to associate each audio element with the corresponding key. 我想在每次按键时获得声音。首先，我想将每个音频元素与相应的按键相关联。
I am getting error such as, 我收到诸如以下错误：
"soundBox.js:7 Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': 'audio[data-key=100]' is not a valid selector."
Could you please say what am I missing ? 你能说我想念的是什么吗？ Can't I use data-key attribute for two different elements (div and audio in my case) ? 我不能对两个不同的元素（在我的情况下为div和audio）使用data-key属性吗？ I am using Chrome browser. 我正在使用Chrome浏览器。
3 个解决方案
解决方案1
1 已采纳 2018-01-10 13:18:21
Wrap attribute value in quotes, see Attribute selectors 将属性值括在引号中，请参阅属性选择器
document.querySelector(`audio[data-key="${tempVal}"]`)
let keyArr = document.querySelectorAll(".musicKey"); var audioKeyProp; keyArr.forEach(function(item) { //console.log(item); let tempVal = item.getAttribute('data-key'); console.log(document.querySelector(`audio[data-key="${tempVal}"]`)); });
<div id="main-div"> <div class="keys"> <div data-key="100" class="musicKey"> <p>D</p><span>(Do)</span></div> <div data-key="114" class="musicKey"> <p>R</p><span>(Re)</span></div> <!--there are more such div. To make it simple I only mentioned two --> </div> </div> <audio data-key="100" src="audio/do.mp3" type="audio/mpeg"></audio> <audio data-key="114" src="audio/re.mp3" type="audio/mpeg"></audio>
解决方案2
1 2018-01-10 13:20:59
If you want to push this value to array it goes like this: 如果要将此值推送到数组，则如下所示：
let keyArr = document.querySelectorAll(".musicKey");
let audioKeyProp = [];
keyArr.forEach(function (item) {
console.log(item);
let tempVal = item.getAttribute('data-key');
audioKeyProp.push(document.querySelector(`audio[data-key='${tempVal}']`));
console.log(audioKeyProp);
});
解决方案3
0 2018-01-10 14:00:33
let list = document.querySelectorAll(".musicKey"); var audioKeyProp = {}; Array.prototype.forEach.call(list, function (item,i) { let tempVal = item.getAttribute('data-key'); let dom = document.querySelector('audio[data-key="'+tempVal+'"]'); if(dom) audioKeyProp[i] = dom.src }); console.log(audioKeyProp)
<body> <div id="main-div"> <div class="keys"> <div data-key="100" class="musicKey"><p>D</p><span>(Do)</span></div> <div data-key="114" class="musicKey"><p>R</p><span>(Re)</span></div> <!--there are more such div. To make it simple I only mentioned two --> </div> </div> <audio data-key="100" src="audio/do.mp3" type="audio/mpeg"></audio> <audio data-key="114" src="audio/re.mp3" type="audio/mpeg"></audio> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.