HTML5 data- *屬性上的querySelector（）函數錯誤
[英]error for querySelector() function on HTML5 data-* attribute
問題描述
我正在嘗試使用Vanilla Js創建具有所有聲音（如Do，Re，Mi等）的簡單鋼琴。 我收到有關data- *屬性的querySelector函數的錯誤。 這是我的代碼的相關部分。
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>
我想在每次按鍵時獲得聲音。首先，我想將每個音頻元素與相應的按鍵相關聯。
我收到諸如以下錯誤：
“ soundBox.js：7未捕獲的語法錯誤：無法在'Document'上執行'querySelector'：'audio [data-key = 100]'不是有效的選擇器。”
你能說我想念的是什么嗎？ 我不能對兩個不同的元素（在我的情況下為div和audio）使用data-key屬性嗎？ 我正在使用Chrome瀏覽器。
3 個解決方案
解決方案1
1 已采納 2018-01-10 13:18:21
將屬性值括在引號中，請參閱屬性選擇器
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
如果要將此值推送到數組，則如下所示：
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>
HTML5 Data- *屬性未按預期工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.