javascript - 如何在 JavaScript 中读取所选元素的值

Question

我有几张这样的图片:

    <img id="geqfader" frequency="100" src="img/fader.png" />
    <img id="geqfader" frequency="400" src="img/fader.png" />
    <img id="geqfader" frequency="1600" src="img/fader.png" />
    <img id="geqfader" frequency="6300" src="img/fader.png" />

当用户单击图像时，我想调用一个函数并传递频率的值:

  document.getElementById('geqfader').addEventListener('click', function() {
    showResult(hereIWantTheFrequencyValue, toneFrequency)
  });

如何将图像频率值传递到showResult(其中hereIWantTheFrequencyValue是)？

Answer 1

在 HTML 中，每个元素的 id 值应该是唯一的值。在像您这样的情况下，您可以在元素上使用自定义属性。要使用自定义属性获取元素，您可以使用 JavaScript 中的 querySelectorAll 函数，如以下示例所示:

let elms = document.querySelectorAll('[my_id="geqfader"]');

for(let elm of elms){
elm.addEventListener('click', function(e) {
    console.log(e.target.getAttribute('frequency'))
  });
}

<img my_id="geqfader" frequency="100" src="img/fader.png" />
<img my_id="geqfader" frequency="400" src="img/fader.png" />
<img my_id="geqfader" frequency="1600" src="img/fader.png" />
<img my_id="geqfader" frequency="6300" src="img/fader.png" />

编辑作为替代方案，我建议您使用 class 属性而不是自定义属性，该属性允许您使用 getElementsByClassName 函数而不是 querySelectorAll。此外，data- 前缀使我们能够使用自定义数据属性。

let elms = document.getElementsByClassName('geqfader');

for(let elm of elms){
elm.addEventListener('click', function(e) {
    console.log(e.target.getAttribute('frequency'))
  });
}

<img class="geqfader" data-frequency="100" src="img/fader.png" />
<img class="geqfader" data-frequency="400" src="img/fader.png" />
<img class="geqfader" data-frequency="1600" src="img/fader.png" />
<img class="geqfader" data-frequency="6300" src="img/fader.png" />