javascript - 如何使用 JQuery 获取数据属性？

Question

从这里Are empty HTML5 data attributes valid?

他们说data属性可以是property

所以我用这个来测试，这个预期的结果是true/false，但是我只得到了undefined，如何使用jquery得到正确的结果？

<input type='checkbox' onclick='testDataProp(this)' data-tf>
<input type='checkbox' onclick='testDataProp(this)'>
function testDataProp(clickedBox)
{
    var trueFalse=$(clickedBox).prop('data-tf');
    alert(trueFalse);
}

Answer 1

使用.data()获取数据属性，如:

function testDataProp(clickedBox)
{
    var trueFalse=$(clickedBox).data('tf');
    alert(trueFalse);
}

演示 jsFiddle

更新:你可以使用 .hasData()检查，如:

function testDataProp(clickedBox)
{
    var trueFalse=$.hasData(clickedBox); //returns false
    alert(trueFalse);
}

如果你想检查 data-tf 属性是否存在，那么你可以使用 .hasAttribute() :

function testDataProp(clickedBox)
{
    var trueFalse=$(clickedBox)[0].hasAttribute('data-tf'); //returns true for first and false for second checkbox
    alert(trueFalse);
}