javascript - 如何从选定对象的数组中获取数据属性值

Question

我的 HTML 有一些带有数据属性的 anchor 标记，如下所示:

<a href="#" class="color" data-colorValue="FF0000">Red</a>
<a href="#" class="color" data-colorValue="0000FF">Blue</a>
<a href="#" class="color" data-colorValue="00FF00">Green</a>

我的 JavaScript 代码需要为每个 anchor 标记添加一个点击事件监听器。当事件被触发时，我需要获取颜色值。我的代码如下。

const colors = document.querySelectorAll('.color');

for(let i = 0; i < colors.length; i++){
  colors[i].addEventListener('click', () => {
    console.log('test to see if click is working');
    console.log(this.dataset.colorValue);
  });
}

我收到错误消息“无法读取未定义的属性‘colorValue’”

Answer 1

使用 .getAttribute('data-colorValue');

const colors = document.querySelectorAll('.color').forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    const color = el.getAttribute('data-colorValue');
    console.log(color);
  });
});

<a href="#" class="color" data-colorValue="FF0000">Red</a>
<a href="#" class="color" data-colorValue="0000FF">Blue</a>
<a href="#" class="color" data-colorValue="00FF00">Green</a>