默认设置data- html5值 [英] set data- html5 value by default

问题描述

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

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...

问题是，即使在$(document).ready之前，也可以将数据HTML5属性设置为默认值吗?我的意思是:

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

<!--In the text editor:-->
<div data-boolean></div>
<!--In the code inspector after browser render:-->
<div data-boolean="true"></div>

我使用以下方法尝试过:

I tried it using the following method:

var $me = $(this),    
    $meData = $me.data(),
    $meZoom  = ($meData.sgImgzoom) ? $meData.sgImgZoom : true ;

但是没有用，当我对该属性做一个console.log()时，我得到一个空字符串，而不是布尔变量.仅当我手动将值设置为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..

对于

<div data-sg-img-zoom data-sg-src="img/test.jpg" data-sg-apa="APA Test Text!"></div> 

console.log代码:

$.each($meData, function(i,v) {
             console.log(i + ' = ' + v + ' (' + typeof(v) + ')');
        }); 

浏览器响应:

sgApa = APA Test Text! (string)
sgSrc = img/test.jpg (string)
sgImgZoom =  (string)

针对:

<div data-sg-img-zoom="false" data-sg-src="img/test-2.jpg" data-sg-apa="APA Test Text!"></div>

浏览器响应:

sgApa = APA Test Text! (string)
sgSrc = img/test-2.jpg (string)
sgImgZoom = false (boolean)

我尝试了具有不同属性(例如APA)的相同方法，并且似乎可以正常工作...所以我不知道.

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

为

 <div data-sg-img-zoom="false" data-sg-src="img/test-3.jpg" data-sg-apa></div>

和

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

data-sg-apa将为如果使用data-sg-apa attr，则必须使用APA文本"，直到您将属性留空...

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

编辑 我在该站点上阅读了一些类似的问题，我想我可以说我解决"了问题. 在 .data()文档

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属性时将提取data-属性，然后不再对其进行访问或对其进行突变(所有数据值均>然后存储在jQuery中)

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)

您也可以在中看到发布

使用 Chrome DevTools 控制台检查DOM， $('#foo').data('helptext', 'Testing 123'); 不更新值 如在控制台中看到的，但$('#foo').attr('data-helptext', 'Testing 123');可以.

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.

因此，您必须在之前进行更改，然后像这样设置所有数据:

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*/ }

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

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.

所以现在的问题是:在这种情况下我应该使用HTML5数据吗?，还是可以使用jquery .attr()

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

在此处

推荐答案

您正在看到此行为，因为jQuery data ()方法尝试将属性转换为Javasript值，以下摘自手册:

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

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

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

以字符串形式检索值的属性，而无需尝试进行任何转换 使用 attr()方法.

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

根据有关布尔属性:

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

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.

布尔值属性不允许使用值"true"和"false". 为了表示一个假值，必须省略该属性 完全.

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

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

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

测试属性的存在

如果您只想测试属性data-attr的初始存在，例如<div data-attr>，则jQuery data()和attr()均返回undefined，因此可以使用以下代码:

If you would like to test only initial presence of the attribute data-attr such as <div data-attr> then both jQuery data() and attr() return undefined, so the following code could be used:

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

或

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

测试属性和true/false值的存在

Testing for presence of the attribute and true/false values

如果要测试属性data-attr和值true/false(例如<div data-attr>，<div data-attr="true">和<div data-attr="false">)的存在，请使用下面的代码.

If you would like to test for presence of the attribute data-attr AND values true/false such as <div data-attr>, <div data-attr="true"> and <div data-attr="false">, use the code below.

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;

作为副作用，属性值1，foo也将被视为true；和0，null，NaN将被视为false.

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

您的示例解决方案

由于通过单个data()调用检索了所有data-属性，因此需要使用以下代码:

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

var $meZoom = (
      $meData.hasOwnProperty('sgImgZoom') 
      && ($meData.sgImgZoom === '' || $meData.sgImgZoom)
) ? true : false;

这篇关于默认设置data- html5值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！