JS："data-background-color" 和 .data("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" 的 bg 颜色。函数从哪里获取数据值 ("background-color")？

我的猜测是 "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

HTML5 您在文档中使用的自定义数据属性仍然具有有效的markup.Browser 理解数据- 作为自定义属性。
自定义数据属性临时存储该值。当您调用 it.this 时，将对象 a 重新引用单击它会相应地设置颜色。

Answer 2

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

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

因此您的第二种方法执行以下操作：每当单击具有 data-background-color 属性的锚点 (a) 元素时，其背景和字体颜色分别设置为其 data-background-color 和 data-text-color 属性。

JS："data-background-color" 和 .data("background-color") 之间的关系

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

javascript

coffeescript