javascript - JQuery .prop() 和 .attr() setter 不适用于对话框 polyfill

Question

我有一个简单的对话框标签，它是使用 GoogleChrome dialog-polyfill.js 添加的

<button id="dialog-show" class="mdl-button mdl-button--raised mdl-js-button dialog-button">Show Dialog</button>

<dialog id="remove-inventory-dialog" class="mdl-dialog">
    <div class="mdl-dialog__title">
        <p></p>
    </div>
    <div class="mdl-dialog__actions">
        <button class="mdl-button mdl-js-button">Ok</button>
        <button class="mdl-button mdl-js-button">Cancel</button>
    </div>
</dialog>

我试图添加一个新的数据属性 id至 <p>使用 jQuery .prop() 标记和 .attr() , 但它在我的预期中不起作用

$('#dialog-show').click(function () {

    $('#remove-inventory-dialog p').text('test value'); // worked
    $('#remove-inventory-dialog p').prop("data-id", 1); // didn't work
    $('#remove-inventory-dialog p').attr("data-id", 1); // didn't work
    $('#remove-inventory-dialog p').data("id", 1); // didn't work

});

我谷歌了很多，但找不到解决方案。那么我该如何解决这个问题呢？

Codepen 有问题的代码:http://codepen.io/anon/pen/QyZYPK

Answer 1

David Thomas 是正确的，将它放在您的 JQuery 代码之后，您将看到您已经设置了 data-id 值。

JQuery( http://codepen.io/larryjoelane/pen/WraPPw ):

var data = '#remove-inventory-dialog p';

//alert the data value you set (returns 1)
alert($(data).data("id"));

或者您可以使用控制台日志(右键单击页面并单击检查元素，然后单击控制台选项卡):

//display to the console the data value you set (returns 1)
console.log($(data).data("id"));

您可以通过控制台记录数据对象来了解 David Thomas 在谈论什么:

var data = '#remove-inventory-dialog p';

console.log($(data).data());

控制台日志结果图片:

如果您在控制台中单击对象，您将看到它有一个值为 1 的 id 属性。

数据对象属性: