Question

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

<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代码需要向每个定位标记添加点击事件监听器。触发事件时，我需要获取颜色值。我的代码在下面。

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>

Answer 2

如果将数据属性更改为data-color-value，则应该能够使用this.dataset.colorValue

进行检索

在此处查看有关数据属性命名规则的更多信息： https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

HTML中的自定义数据属性的名称以data-开头。它只能包含字母，数字和以下字符：破折号（-），点（。），冒号（:)，下划线（_）-但不包含任何ASCII大写字母（A到Z）。

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

2 个答案: