Question

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

问题是，是否可以在$(document).ready之前设置具有默认值的数据HTML5属性？我的意思是：

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

我使用以下方法尝试了它：

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

但是没有用，当我创建一个console.log()的attr我得到一个空字符串，而不是一个布尔变量。当我手动将值设置为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不同的属性相同的方法，似乎工作......所以我不知道..

的

 <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() documentation

中提到

数据属性在第一次访问数据属性时被拉出，然后不再被访问或变异（所有数据值都被＆gt;然后内部存储在jQuery中）

您还可以在this帖子中看到

使用Chrome DevTools控制台检查DOM， $('#foo').data('helptext', 'Testing 123'); 不会更新该值如控制台中所示但$('#foo').attr('data-helptext', 'Testing 123');确实如此。

所以你必须在之前更改，然后设置所有数据：

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

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

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

现在代码按预期工作，但很清楚.attr()和.data()是两种不同的方式，应该在非常具体的情况下使用。

现在的问题是：我应该使用HTML5数据 - 针对这种特殊情况吗？还是使用jquery .attr()更容易处理

请参阅更新代码here

默认情况下设置data-html5值

0 个答案: