javascript - HTML 图像属性返回未定义

Question

我有一组 5 个图像，每个图像在过滤器列表中都有一个唯一的过滤器属性，主图像在单独的 div 中。 主图像未应用滤镜。

我想让用户单击侧边栏上的任何图像，然后将所选过滤器应用到主图像。 我尝试使用事件监听器来实现这一点，但我不太明白发生了什么。

这是我的代码: <img src='http://res.cloudinary.com/demo/image/upload/c_fill,e_art:audrey,h_80,w_120/sample' filter='audrey' className='filter' /> 以及当用户选择图像时调用的事件监听器。

onFilterSelect = event => {
      console.log(evenet.target) // returnsimg element
      console.log(event.target.src) // returns src of img element
      console.log(event.target.filter) // returns undefined
}

我想使用 filter='filter' prop 来调度一个将状态设置为新选择的过滤器的操作，但结果我一直得到未定义的结果。

Answer 1

HTMLImageElement.prototype 没有 filter property(您正在尝试访问的属性)。

您的图像具有过滤器-属性(这会使您的 HTML 无效，因为它不是 img< 上的有效属性 元素)。

如果您需要坚持使用该无效的属性名称，可以使用以下方式访问它

console.log(event.target.getAttribute('filter'))

更好的解决方案是将该属性更改为 data-filter 属性，您可以像这样访问它:

console.log(event.target.dataset.filter)

请注意，.dataset 对象中有一个特殊的命名约定:

data-filter="Audrey"

可以使用

访问

img.dataset.filter

但是

data-image-filter="Audrey"

将使用访问

img.dataset.imageFilter

注意 kebab-case 到 Camel-Case 的自动转换!