javascript - JS : relation between "data-background-color" and . 数据 ("background-color")

Question

我目前正在处理 Working with Javascript in Rails guide 。该行之间的关系

backgroundColor = $(this).data("background-color")

这个让我很困惑:

<a href="#" data-background-color="#990000">Paint it red</a>

据我了解，它设置了“this”的背景颜色。该函数从哪里获取数据值(“背景颜色”)？

我的猜测是“background-color”之前的“data-”允许函数访问HTML中的值？

非常感谢您解释这种关系并为我提供更多信息。

这是完整的 JS/coffeescipt 代码:

paintIt = (element, backgroundColor, textColor) ->
  element.style.backgroundColor = backgroundColor
  if textColor?
    element.style.color = textColor

$ ->
  $("a[data-background-color]").click (e) ->
  e.preventDefault()

  backgroundColor = $(this).data("background-color")
  textColor = $(this).data("text-color")
  paintIt(this, backgroundColor, textColor)

完整的 HTML:

<a href="#" data-background-color="#990000">Paint it red</a>
<a href="#" data-background-color="#009900" data-text-color="#FFFFFF">Paint it green</a>
<a href="#" data-background-color="#000099" data-text-color="#FFFFFF">Paint it blue</a>

Answer 1

在我看来，你基本上是对的。 jQuery .data(key)您的用例中的方法允许检索相应的 data-它所应用到的 dom 元素的属性。

例如，$(this).data('background-color')将检索 data-background-color dom 元素的属性由 this 引用.

所以你的第二个方法执行以下操作:每当 anchor ( a )元素具有 data-background-color 时单击属性时，其背景颜色和字体颜色分别设置为其 data-background-color 的值和data-text-color属性。