对HTML5 data- *属性的querySelector()函数的错误

时间:2018-01-10 13:13:57

标签: javascript html5 css3

我正在尝试使用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>
&#13;
&#13;
&#13;

我想在每次按键时获得声音。首先,我想将每个音频元素与相应的键相关联。

我收到错误,例如,

  

&#34; soundBox.js:7 Uncaught SyntaxError:无法执行&#39; querySelector&#39;   on&#39; Document&#39;:&#39; audio [data-key = 100]&#39;不是有效的选择器。&#34;

你可以说我错过了什么吗?我不能将数据键属性用于两个不同的元素(在我的情况下为div和音频)?我使用的是Chrome浏览器。

3 个答案:

答案 0 :(得分:1)

用引号括住属性值,请参阅Attribute selectors

document.querySelector(`audio[data-key="${tempVal}"]`)

&#13;
&#13;
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}"]`));
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

如果你想将这个值推送到数组,它就像这样:

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);
});

答案 2 :(得分:0)

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>