javascript - 通过 Jquery data() 附加时以及直接通过 HTML 中的数据属性附加时检查 HTML 元素中的 data()

Question

我是 Jquery 新手，所以只是玩玩，我正在尝试构建一个小插件，问题是它将广泛使用 data() 属性。我浏览了 Jquery 文档几次。但我有一个小问题仍然存在。

我有以下 HTML:

    <button data-m='lala' data-l="pinky">Click me</button>  

和以下 Jquery 代码来检查按钮元素是否附加有任何 data() 。

            if ($('button').data()) {
                console.log('there is data');
            }else{
                console.log('Theres no data')
            }  

但即使我去掉 html 数据属性，它也会记录有数据。

后来我遇到了一个Jquery方法，它本身会告诉你所选元素是否附加了data，该方法称为$.hasData() 。

所以我修改了我的程序，如下所示:

if ($.hasData($('button'))) {
                    console.log('there is data');
                }else{
                    console.log('Theres no data')
                }

现在我的控制台中没有数据。我不知道出了什么问题。

现在测试是否发生这种情况，因为我是通过数据属性而不是 Jquery data() 方法附加数据。我再次将程序修改如下:

$('button').data({
                      'lala'   : '1',
                      'lala-1' :  '2'
                });

                if ($.hasData($('button'))) {
                    console.log('there is data');
                }else{
                    console.log('Theres no data')
                }

我的控制台中仍然出现Theres no data。

但是如果我console.log以下内容:

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

我得到:

{ lala: "1", lala-1: "2", m: "lala", l: "pinky" }

现在我想要的是我的代码告诉我给定元素何时附加了数据(直接 html 数据属性以及 Jquery data() 属性)或没有附加数据它 。

我将不胜感激任何帮助、解释，或者即使有人能给我指出正确的方向。

谢谢。

亚历山大。

Answer 1

我的理解是，JQuery 的“hasData”采用一个元素，而不是元素的集合。

尝试:

var button = jQuery('button')[0];
jQuery.data( button, "testing", 123 );

if (jQuery.hasData(button)) {
  console.log('there is data');
} else {
  console.log('Theres no data')
}

来源:http://api.jquery.com/jquery.hasdata/

编辑:

经过测试，我得到了一些类似的结果，hasData 没有获取元素数据属性，所以这个小解决方案对我来说很有用:

HTML:

<button id="a" data-m='lala' data-l="pinky">Click me</button>  
<button id="b">Click me</button>  

Javascript:

var buttonA = jQuery('#a');
var buttonB = jQuery('#b');

if (Object.keys(buttonA.data()).length >0) {
    console.log("buttonA", "Has data");
} else {
    console.log("buttonA", "Has no data");
}
if (Object.keys(buttonB.data()).length >0) {
    console.log("buttonB", "Has data");
} else {
    console.log("buttonB", "Has no data");
}

输出:

buttonA Has data
buttonB Has no data