使用jQuery获取data-的自定义属性
废话少说,先上代码
jQuery.fn.dataset=function(attr,val){ //获取数据集 if(arguments.length==0){ vardataset={}; jQuery(this).eq(0).each(function(){ varattrs=this.attributes; for(vari=0,l=attrs.length;i<l;i++){ varattr=attrs[i]; if(/^data-/i.test(attr.name)){ dataset[decode(encode(attr.name.substring(5)))]=autobox(attr.value); if(decode(encode(attr.name.substring(5)))=="path"){ dataset[decode(encode(attr.name.substring(5)))]=attr.value!=null?String(attr.value):null; } if(decode(encode(attr.name.substring(5)))=="name"){ dataset[decode(encode(attr.name.substring(5)))]=attr.value!=null?String(attr.value):null; } } } }); returndataset; } //返回指定数据 if(arguments.length==1&&typeofattr!='object'){ if(encode(attr)=="data-path"){ returnthis.attr(encode(attr)); } returnautobox(this.attr(encode(attr))); } //设置数据集 vardataset=attr; if(typeofattr!='object'){ dataset={}; dataset[attr]=String(val); } vartmp={}; jQuery.each(dataset,function(k,v){ tmp[encode(k)]=autobox(v); }); returnthis.attr(tmp); };
通过jQuery制作组件,可以轻松获取到我们data-的自定义属性,也可以给data-属性来赋值。
获取:
$("div").dataset("name")//获取data-name的值
赋值:
$("div").dataset("name","Tezml")//给data-name这个属性赋值为Tezml