Question

我目前正在使用Working with Javascript in Rails guide。这一行之间的关系

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

那个令我困惑的是：

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

据我所知，它设定了＆＃34;这个＆＃34;的bg颜色。函数从何处获取数据的值（＆＃34; background-color＆＃34;）？

我的猜测是＆＃34;数据 - ＆＃34;之前＆＃34;背景颜色＆＃34;允许函数访问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自定义数据属性，并且仍然具有有效的标记。浏览器将数据理解为自定义属性。
并且自定义数据属性暂时存储该值。并且您调用它。这表示您在对象时对象点击它会相应地设置颜色。

Answer 2

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

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

因此，您的第二个方法执行以下操作：每当单击具有a属性的锚（data-background-color）元素时，其背景和字体颜色将分别设置为其{{1 }和data-background-color属性。

JS：“data-background-color”和.data（“background-color”）之间的关系

2 个答案: