html5 setdata,默认设置data-html5值

I have this small code that put some preset style to a div with custom attributes, that attributes set the src and an APA text to an img tag, also generate a button with a zoom option using FancyBox... I'm kinda new in the jquery world, so maybe I'm using the data attribute in in a wrong way...

我有这个小代码,它将一些预设样式放到具有自定义属性的div中,该属性将src和APA文本设置为img标记,还使用FancyBox生成带缩放选项的按钮...我有点新jquery世界,所以也许我正在以错误的方式使用数据属性...

The question is, is possible to set a data HTML5 attribute with a default value, even before the $(document).ready? I mean:

问题是,是否可以使用默认值设置数据HTML5属性,甚至在$(文档).ready之前?我的意思是:

I tried it using the following method:

我尝试使用以下方法:

var $me = $(this),

$meData = $me.data(),

$meZoom = ($meData.sgImgzoom) ? $meData.sgImgZoom : true ;

But didn't work, when I make a console.log() of that attr I get an empty string, not a boolean variable. it only appear as a boolean when I set manually the value to true..

但是没有用,当我创建一个attr的console.log()时,我得到一个空字符串,而不是一个布尔变量。当我手动将值设置为true时,它只显示为布尔值。

For

console.log code:

$.each($meData, function(i,v) {

console.log(i + ' = ' + v + ' (' + typeof(v) + ')');

});

Browser response:

sgApa = APA Test Text! (string)

sgSrc = img/test.jpg (string)

sgImgZoom = (string)

For:

Browser response:

sgApa = APA Test Text! (string)

sgSrc = img/test-2.jpg (string)

sgImgZoom = false (boolean)

And I tried the same method with a different attribute like APA, and seems to work... so I don't know..

我尝试了与APA不同的属性相同的方法,似乎工作...所以我不知道..

for

and

$meApa = ($meData.sgApa) ? $meData.sgApa : "You must use APA text if data-sg-apa attr used";

data-sg-apa will be "You must use APA text if data-sg-apa attr used" until if you left the attribute empty...

data-sg-apa将是“你必须使用APA文本,如果data-sg-apa attr使用”,直到你把属性留空...

EDIT Reading some similar questions on this site I think I can tell that I "solve" the problem. It is mentioned in the .data() documentation

编辑在这个网站上阅读一些类似的问题我想我可以告诉我“解决”这个问题。它在.data()文档中提到

The data- attributes are pulled in the first time the data property is >accessed and then are no longer accessed or mutated (all data values are >then stored internally in jQuery)

数据属性在第一次访问数据属性时被拉出,然后不再被访问或变异(所有数据值>然后在内部存储在jQuery中)

Also as you can see in this post

另外正如你在这篇文章中看到的那样

Using the Chrome DevTools Console to inspect the DOM, the $('#foo').data('helptext', 'Testing 123'); does not update the value as seen in the Console but $('#foo').attr('data-helptext', 'Testing 123'); does.

使用Chrome DevTools控制台检查DOM,$('#foo')。data('helptext','Testing 123');不会更新控制台中显示的值,而是$('#foo')。attr('data-helptext','Testing 123');确实。

So you have to change it before setting all the data like this:

所以你必须在设置所有数据之前更改它:

var tempVar = false;

if( $(this).data("sgImgZoom" ) === ""){

tempVar = true;

$(this).attr("data-sg-img-zoom",true);//optional if you want to see the "value" of that attribute, but really doesn't matters because that value and the real data value are two completely different things..

}

var $me = $(this),

$meData = $me.data(),

$meZoom = $meData.sgImgZoom = tempVar;//set default value for data-sg-zoom

So now I can validate the function easier like this:

所以现在我可以更容易地验证函数:

if($meZoom){ /*do the thing*/ }

Now the code work as expected but is clear that .attr() and .data() are a way two different things and should be used in very specific situations.

现在代码按预期工作,但很明显.attr()和.data()是两种不同的方式,应该在非常特定的情况下使用。

So the question now is: Should I use the HTML5 data- for this particular case? or is easier handle it with jquery.attr()

所以现在的问题是:我应该使用HTML5数据 - 针对这种特殊情况吗?或者使用jquery.attr()更容易处理它

see the update code here

请在此处查看更新代码

1 个解决方案

#1

You're seeing this behavior because jQuery data() method attempts to convert attributes into Javasript values, below is an excerpt from the manual:

您看到此行为是因为jQuery data()方法尝试将属性转换为Javasript值,下面是手册的摘录:

Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null).

每次尝试都将字符串转换为JavaScript值(这包括布尔值,数字,对象,数组和null)。

To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method.

要将值的属性检索为字符串而不尝试转换它,请使用attr()方法。

According to HTML5 specification regarding boolean attributes:

根据关于布尔属性的HTML5规范:

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

如果该属性存在,则其值必须是空字符串,或者是属性的规范名称的ASCII不区分大小写匹配的值,没有前导或尾随空格。

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

布尔属性不允许使用值“true”和“false”。要表示错误值,必须完全省略该属性。

This is probably the reason why jQuery returns empty string as value for data-sg-img-zoom attribute.

这可能就是为什么jQuery返回空字符串作为data-sg-img-zoom属性的值的原因。

Testing for presence of the attribute

测试是否存在属性

If you would like to test only initial presence of the attribute data-attr such as

then both jQuery data() and attr() return undefined, so the following code could be used:

如果您只想测试属性data-attr的初始存在,例如

,则jQuery data()和attr()都返回undefined,因此可以使用以下代码:

var is_set = (typeof $(el).attr('data-attr') === 'undefined') ? true : false;

or

var is_set = (typeof $(el).data('attr') === 'undefined') ? true : false;

Testing for presence of the attribute and true/false values

测试是否存在属性和true / false值

If you would like to test for presence of the attribute data-attr AND values true/false such as

,

and

, use the code below.

如果您想测试属性data-attr和值true / false的存在,例如

,

和

,使用下面的代码。

var el_data_attr = $(el).data('attr');

var is_set = (

// If attribute is specified

typeof el_data_attr !== 'undefined'

// And no value is given or value is evaluated to true

&& (el_data_attr === '' || el_data_attr)

) ? true : false;

As a side effect, attribute values 1, foo will also be treated as true; and 0, null, NaN will be treated as false.

作为副作用,属性值1,foo也将被视为true;和0,null,NaN将被视为false。

Solution for your example

解决方案的例子

Since you retrieve all data- attributes with single data() call, you need to use the following code:

由于您使用单个data()调用检索所有数据属性,因此需要使用以下代码:

var $meZoom = (

$meData.hasOwnProperty('sgImgZoom')

&& ($meData.sgImgZoom === '' || $meData.sgImgZoom)

) ? true : false;