Question

我在表格中有一些行，我希望只有一个表格用于所有网页，而不是每个表格都有一个表格。每行都可以编辑或删除。我尝试使用data属性来共享使用它来执行一般操作。

HTML

<div id="deleteConfirm" title="Delete user?" style="display:none">
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>..Are you sure?</p>
</div>

<button type="button" id="deleteButton1" data-userName="test1" class="ui-button ui-widget ui-state-default ui-corner-all" role="button"><span class="ui-button-icon-primary ui-icon ui-icon-minus"></span>
</button>
<button type="button" id="deleteButton2" data-userName="test2" class="ui-button ui-widget ui-state-default ui-corner-all" role="button"><span class="ui-button-icon-primary ui-icon ui-icon-minus"></span>
</button>

JS

$("[id^=deleteButton]").button({
icons: {
    primary: "ui-icon-minus"
},
text: false
});

$("[id^=deleteButton]").click(function () {
//var userName = $("[id^=deleteButton]").data('data-reportname');
var userName = $(this).data('userName');
alert(userName);
$("#deleteConfirm").data('userName', userName).dialog("open")
  //  $("#deleteConfirm").dialog("open");
});

$("#deleteConfirm").dialog({
autoOpen: false,
resizable: false,
width: 400,
height: 180,
modal: true,
buttons: {
    "Delete user": function () {
    alert($(this).data('userName'));
    $(this).dialog("close");
    },
    Cancel: function () {
    $(this).dialog("close");
    }
}
});

我无法读取数据属性。

我创建了一个基本测试 http://jsfiddle.net/q5fLz/1/

Answer 1

data属性必须全部小写：

<button type="button" id="deleteButton1" data-username="test1" class="ui-button ui-widget ui-state-default ui-corner-all" role="button">
    <span class="ui-button-icon-primary ui-icon ui-icon-minus"></span>
</button>
<button type="button" id="deleteButton2" data-username="test2" class="ui-button ui-widget ui-state-default ui-corner-all" role="button">
    <span class="ui-button-icon-primary ui-icon ui-icon-minus"></span>
</button>

$("[id^=deleteButton]").click(function () {
    var userName = $(this).data('username');
    alert(userName);
    $("#deleteConfirm").data('username', userName).dialog("open")
});

Example fiddle

请注意，因为jQuery将所有数据属性放入对象中，所以它将带有连字符的属性名称转换为驼峰大小写。例如。可以使用user-name或$.data('user-name')访问$.data('userName')。您在HTML属性中使用camelcase使jQuery认为该属性为data-user-name。

Answer 2

数据属性应定义为划线划分（user-name），并在jQuery中将其读取为驼峰式规范化（{{1} }）。

引自source（感谢@ ajp15243）：

元素 .dataset返回元素的userName对象   DOMStringMap属性。

连字符的名字变得骆驼状。例如，data-*   变为data-foo-bar=""。

因此，对DOM的这种更改应该适用于您的jQuery代码：

element.dataset.fooBar

jsFiddle ：http://jsfiddle.net/Ap2ZH/

无权访问数据属性

2 个答案: