0

我有几个这样的图像：

    <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" />

当用户单击图像时，我想调用一个函数并传递以下值frequency：

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

如何将图像frequency值传递到showResult（在哪里hereIWantTheFrequencyValue）？

4

4 回答 4

1

用 class 替换所有 id 并设置onclick="showValue(this)"为所有 img 标签，如下面的代码......

        <img class="geqfader" onclick="showValue(this)" frequency="100" src="img/fader.png" />
        <img class="geqfader" onclick="showValue(this)" frequency="400" src="img/fader.png" />
        <img class="geqfader" onclick="showValue(this)" frequency="1600" src="img/fader.png" />
        <img class="geqfader" onclick="showValue(this)" frequency="6300" src="img/fader.png" />


<script>

function showValue(img){
  alert(img.getAttribute('frequency'));
}

</script>
于 2018-09-08T11:59:07.913 回答
1

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

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" />

于 2018-09-08T12:07:13.543 回答
0

您应该学习更多 JavaScript 并了解 DOM 和 EventListener 的工作原理。首先，ID 是唯一的，即使您可以定义重复的无效标记。 document.getElementById仅返回第一个匹配的元素，因此您的点击处理程序仅附加到第一个 img。
这应该有效：

Array.slice.call(document.querySelectorAll("img[frequency]")).forEach(function(img) {
  img.addEventListener("click", function(e) {
    var frequency = e.target.getAttribute("frequency");
  });
});

Array.slice.call使用是因为querySelectorAll返回 aNodeList而不是Array

于 2018-09-08T12:00:25.677 回答
-1

event.target.getAttribute('frequency')

event事件处理函数作为参数的参数在哪里。

于 2018-09-08T11:59:01.863 回答