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

我正在尝试使用Vanilla Js创建一架简单的钢琴，其中包含所有声音，例如Do，Re，Mi等。我收到有关 data-* 属性的查询选择器函数的错误。这是我代码的相关部分。

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 未捕获的语法错误：无法执行"查询选择器" 在'文档'上："音频[数据键=100]"不是有效的选择器。

你能说说我错过了什么吗？我不能对两个不同的元素(在我的情况下是div 和音频(使用数据键属性吗？我正在使用 Chrome 浏览器。

用

引号括起来的属性值，请参阅属性选择器

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>

如果你想把

这个值推到数组，它是这样的：

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

<</div> div class="one_answers">

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>

相关内容

最新更新

热门标签：