代码之家 › 专栏 › 技术社区 › Max

如何在JavaScript中读取选定元素的值

html5 javascript

Max · 技术社区 · 6 年前

我有几张这样的照片:

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

如何传递图像价值观 showResult (其中 hereIWantTheFrequencyValue 是吗?

4 回复 | 直到 6 年前

Max 6 年前

在HTML中 id querySelectorAll JavaScript中的函数,如下例所示:

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 查询选择器all . 此外,还有 data- prefix使我们能够使用自定义数据属性。

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

Akbar Soft 6 年前

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>

Code Spirit 6 年前

首先,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 返回一个 NodeList Array

-1

Ertan Kara 6 年前

event.target.getAttribute('frequency')

在哪里? event