Question

我正在尝试使用Vanilla Js创建一个简单的钢琴，包括Do，Re，Mi等所有声音。我收到有关data- *属性的querySelector函数的错误。这是我的代码的相关部分。

＆＃13;

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

＆＃13;

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

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

我收到错误，例如，

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

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

Answer 1

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

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

＆＃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;

Answer 2

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

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

Answer 3

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- *属性的querySelector（）函数的错误

3 个答案: