我有这个小代码,将一些预设样式放入具有自定义属性的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-
属性,因此需要使用以下代码:
需要了解更多jQuery教程分享默认设置data-html5值,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
var $meZoom = ( $meData.hasOwnProperty('sgImgZoom') && ($meData.sgImgZoom === '' || $meData.sgImgZoom) ) ? true : false;
以上就是jQuery教程分享默认设置data-html5值相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/982314.html