从数据属性获取数据答案

【问题标题】：getting data from data attribute从数据属性获取数据
【发布时间】：2013-03-13 21:57:31
【问题描述】：

我在这样的链接上为用户设置了数据属性

  <input type="button" class="btn" data-user={"user": "<%= @user.name %>"}  value="Start" id="game">

在侦听点击事件的 javascript 函数中，我执行了 console.log(e.target) 并将整个内容打印到控制台。

<input type="button" class="btn" data-user={"user": "<%= @user.name %>"}  value="Start" id="game">

如果我执行console.log(e)，即没有 e.target，它会记录 jquery 事件，但数据属性未定义

data: undefined

我正在尝试从数据属性中提取用户名，但不知道如何从中获取它

<input type="button" class="btn" data-user={"user": "<%= @user.name %>"}  value="Start" id="game">

当我只记录事件时，我不知道为什么数据未定义。

如果您能帮我解决这个问题，我将不胜感激。提前致谢。

【问题讨论】：

请向我们展示浏览器看到的实际生成的标记。如果上面的“标记”是浏览器看到的，那不是有效的标记。
我认为这些都不是有效的标记。
属性值需要用引号引起来：data-user="{'user': '<%= @user.name %>'}"或data-user="<%= @user.name %>"
console.log($(this).attr("data-user"))
用解释检查这个答案stackoverflow.com/questions/11052806/…

【解决方案1】：

您的 HTML 是……独一无二的？而不是这个：

data-user={"user": "<%= @user.name %>"}

试试这个：

data-user="<%= @user.name %>"

然后你可以使用标准的 jQuery .data() 技术获取数据（因为你提到了 jQuery）：

var user = $('#game').data('user');

【讨论】：

谢谢，实际上我的 html 是正确的，但是在我进行了一些谷歌搜索并在另一个博客上发现了一些不好的建议后就更改了它。但是，我没有意识到您将 id (#game) 转换为 jquery 选择器以访问数据属性。谢谢

【解决方案2】：

您可以按如下方式从 DOM 对象中访问数据：

var data = $(e.target).attr("data-user");

【讨论】：