4

我正在使用 jQuery mobile 和 Phonegap 制作一个测试应用程序。我有以下页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile: Theme Download</title>
    <script src="cordova-2.5.0.js"></script>
    <link rel="stylesheet" href="Longmont.min.css" />
    <link rel="stylesheet" href="jquery.mobile.structure-1.3.0.css">
    <script src="jquery.js"></script>
    <script src="jquery.mobile.js"></script>
    <script>
        document.addEventListener("deviceready", onDeviceReady, false);

        function onDeviceReady() {
            setTimeout(function() {
                       navigator.splashscreen.hide();
                       }, 500);
        }
    </script>
    <script>
    $(document).ready(function() {
        $.getJSON('http://localhost/api.php', {'id':3}, function(data) {
            var items = [];

            $.each(data, function(key, val) {
                items.push('<div data-role="collapsible"><h1>' + val + '</h1></div>');
            });

            $('<div/>', {
                data-role: 'collapsible-set',
                html: items.join('')
            }).appendTo('#page');

        });
    });
    </script>
</head>
<body>
    <div data-role="page" id="page">
    </div>
</body>
</html>

我正在尝试将 items 数组放入data-role设置为 的 div 中collapsible-content。因此，我在创建属性时编辑它（在 中$('<div/>', {）。但是，此属性是连字符的，当我在模拟器中尝试此代码时，它会显示一个空白页面。

在 jQuery 中表示连字符属性的正确方法是什么？

4

3 回答 3

13

包含的对象属性-必须用引号引起来。

"data-role": value

其他运算符和特殊字符（如引号、:、;、空格等）也是如此。

于 2013-04-09T20:29:03.850 回答
5

要使用连字符定义属性，请检查Kevin B的这个答案 Define hyphenated attribute with jQuery?

要增强可折叠标记，请在将项目附加到正文后按照以下方法进行操作。

对于可折叠（参考）

$('[data-role=collapsible]').collapsible();

对于可折叠集（参考）

$('[data-role=collapsible-set]').collapsibleset('refresh');
于 2013-04-09T20:41:25.420 回答
1

jQuerydata并不完全类似于dataset，也不应该是因为它没有得到我们想要的广泛支持，这要感谢 MS。 data-role是无效的语法，但dataRole即使您期望它也不起作用。你可以这样做：

"data-role": value

或者

{data: {role: value}}

http://jsfiddle.net/ExplosionPIlls/dK8ak/1/

于 2013-04-09T20:32:48.937 回答