Question

我正在学习如何在HTML5和JQuery中使用Data- *属性，关于如何从div中检索数据。

这是我的标记：

<!DOCTYPE html>
<html >
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        $(function () {

            $('#restoreButton').click(function () {
                var sources$ = $('div').data('module');
              });

        });
    </script>
    <div data-module="Sources" data-module-id="sourcePane">

        <button type="button" class="green90x24" id="restoreButton">Restore</button>
        </div>

</body>
</html>

它说变量来源$是Undefined。

我正在使用JQuery的简单数据（）函数，但不起作用。我已经看到这是基本的。

任何建议都会有所帮助

Answer 1

请检查您的jQuery版本。

或者检查开发人员工具中的日志（Windows中的Ctrl + Shift + I，Mac中的Command + Option + I）。

您可以使用

检查变量来源$

console.log(sources$);

Answer 2

可能需要更新你的jquery版本，但也可以尝试：

$('div').data('module-id');

数据方法抓取属性，期望data-

之后的密钥

Answer 3

使用此变量来源的地方$？

您应该在click事件处理程序中使用此变量。

或者您应该将变量定义为全局变量。

Answer 4

使用jQuery 1.11.0

，来自原始帖子的现有作品似乎正常

HTML

 <div data-module="Sources" data-module-id="sourcePane">   
 <button type="button" class="green90x24" id="restoreButton">Restore</button>
 </div>

JS

$(function () {
    $('#restoreButton').click(function () {
        var sources$ = $('div').data('module');
        $("body").append(sources$)
    });
});

jsfiddle http://jsfiddle.net/guest271314/LZfUv/

Answer 5

您的代码有效，但您可能无法正确加载jQuery。检查jQuery脚本的源URL并确保它加载。如果变量$，您还有在结尾处添加sources$符号的原因吗？它并不常见。

Answer 6

它说变量来源$是Undefined。

无论它出现在何处，它绝对意味着您正试图从其外部访问来源$。您无法在定义为单击回调的匿名函数之外访问它。

Answer 7

jQuery 1.4.1中的.data方法不能与HTML数据属性一起使用。您需要jQuery 1.4.3（最低）。

您使用的示例页面http://bibeault.org/jqia2/chapter3/lab.move.and.copy.html未使用.data方法检索data-module的值。

如果您检查来源，则会有另一个外部脚本jqia2.support.js，该脚本使用data-module方法检索.attr的值（这是使用的解决方法） jQuery 1.4.1中的HTML数据属性。见第50和55行：

$(this).attr('data-module')

这是一个小提琴：http://jsfiddle.net/3dP6A/

HTML5＆amp; JQuery - 无法从Data- *属性中检索数据

7 个答案: