默认设置data-html5值
我有这个小代码，将一些预设样式放入具有自定义属性的div ，该属性将src和APA文本设置为img标记，还使用FancyBox生成带缩放选项的按钮…我有点新jquery世界，所以也许我以错误的方式使用数据属性…
问题是，是否可以使用默认值设置数据HTML5属性，甚至在$(document).ready ？ 我的意思是：
我尝试使用以下方法：
var $me = $(this), $meData = $me.data(), $meZoom = ($meData.sgImgzoom) ? $meData.sgImgZoom : true ;
但是没有用，当我创建一个attr的console.log()时，我得到一个空字符串，而不是一个布尔变量。 当我手动将值设置为true时，它只显示为布尔值。
对于
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)
对于：
浏览器响应：
sgApa = APA Test Text! (string) sgSrc = img/test-2.jpg (string) sgImgZoom = false (boolean)
我尝试了与APA不同的属性相同的方法，似乎工作……所以我不知道..
对于
和
$meApa = ($meData.sgApa) ? $meData.sgApa : "You must use APA text if data-sg-apa attr used";
data-sg-apa将是“你必须使用APA文本，如果data-sg-apa attr used”，直到你把属性留空…
编辑在这个网站上阅读一些类似的问题，我想我可以告诉我，我“解决”了这个问题。 它在.data()文档中提到
数据属性在第一次访问数据属性时被拉出，然后不再被访问或变异（所有数据值>然后在内部存储在jQuery中）
另外正如你在这篇文章中看到的那样
使用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
所以现在我可以更容易地validation函数：
if($meZoom){ /*do the thing*/ }
现在代码按预期工作，但很明显.attr()和.data()是两种不同的方式，应该在非常特定的情况下使用。
所以现在的问题是： 我应该使用HTML5数据 – 针对这种特殊情况吗？ 或者用jquery .attr()更容易处理它
请在此处查看更新代码
你看到这种行为，因为jQuery data（）方法试图将属性转换为Javasript值，下面是手册的摘录：
每次尝试都将字符串转换为JavaScript值（这包括布尔值，数字，对象，数组和null）。
要将值的属性检索为字符串而不尝试转换它，请使用attr（）方法。
根据关于布尔属性的 HTML5规范：
如果该属性存在，则其值必须是空字符串或与属性的规范名称不区分大小写的ASCII匹配的值，不带前导空格或尾随空格。
布尔属性不允许使用值“true”和“false”。 要表示错误值，必须完全省略该属性。
这可能就是为什么jQuery返回空字符串作为data-sg-img-zoom属性的值的原因。
测试是否存在属性
如果您只想测试属性data-attr初始存在，例如
则jQuery data()和attr()返回undefined ，因此可以使用以下代码：
var is_set = (typeof $(el).attr('data-attr') === 'undefined') ? true : false;
要么
var is_set = (typeof $(el).data('attr') === 'undefined') ? true : false;
测试是否存在属性和true / false值
如果您想测试属性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;
作为副作用，属性值1 ， foo也将被视为true ; 和0 ， null ， NaN将被视为false 。
解决方案的例子
由于您使用单个data()调用检索所有data-属性，因此需要使用以下代码：
var $meZoom = ( $meData.hasOwnProperty('sgImgZoom') && ($meData.sgImgZoom === '' || $meData.sgImgZoom) ) ? true : false;