用jQuery定义连字符属性？答案

【问题标题】：Define hyphenated attribute with jQuery?用jQuery定义连字符属性？
【发布时间】：2013-04-09 20:27:42
【问题描述】：

我正在使用 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>

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

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

【问题讨论】：

仅供参考，这个问题与 jQuery 无关，而与 JavaScript 有关。就像你不能在变量名中使用 - 一样，你不能在属性名中使用它（作为字符串当然可以）。
我已添加对我的答案的参考以供将来使用，祝你好运。

标签： javascript jquery jquery-mobile

【解决方案1】：

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

"data-role": value

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

【讨论】：

你的答案是正确的！谢谢，但它给我留下了一个奥马尔解决的问题。

【解决方案2】：

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

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

对于可折叠 (reference)

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

对于可折叠组 (reference)

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

【讨论】：

复制并粘贴其他人对同一问题的回答？即使有链接，这也是非常接近的。我建议只链接到它。

【解决方案3】：

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

"data-role": value

或

{data: {role: value}}

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

【讨论】：

我喜欢{data: {role: value}} 语法，它允许您按原样传递值，而不是将其转换为字符串，以便稍后将其转换回数字。不过有一个重要的区别，{data: {role: value}} 实际上不会创建属性。