data自定义属性可以做这个隐藏显示吗?
<div class="al-item-tabs" id="tabAutoTrigger">
<a class="tips market scr-tip-change" href="javascript:void(0);" data-rel="tabAutoPlay1"></a>
<b class="tabs-line"></b>
<a class="tips shop" href="javascript:void(0);" data-rel="tabAutoPlay2"></a>
<b class="tabs-line"></b>
<a class="tips mall" href="javascript:void(0);" data-rel="tabAutoPlay3"></a>
<a style="display: none;" href="javascript:void(0);" data-rel="tabAutoPlay4"></a>
<a style="display: none;" href="javascript:void(0);" data-rel="tabAutoPlay5"></a>
</div>
<div id="tabAutoPlay1" style="display:block;"></div>
<div id="tabAutoPlay2" style="display:none;"></div>
<div id="tabAutoPlay3" style="display:none;"></div>
知道的大神,希望能提供个玩具代码看看。
修正一下,.data()或者说'data-xxx=""'不是html5的,是jquery的。。。
data-*=""是H5提出的标准,以上错误
具体见w3c中h5标准
实际和attr()类似,可以在页面生成时绑定数据,实际上是给元素添加名称为data-*的属性。
具体见jQuery 数据 - jQuery.data() 方法
1、如果这个data是页面初始化时就填充的,你填充的时候为什么不知道加一个class?
2、如果这个data是你后来加的,那你加、或者操作这个data的时候为什么不加一个class?
以上两步,把加的那个class里面写上display:none不就可以了。。
ok,你可能要骂娘了。。。
那只能一个办法了,写一个$(document).find('[data-xxx]')获取所有含有这个data-xxx元素的节点,
然后遍历,注意使用hasownproperty...
根据遍历的情况将需要改变display的进行操作。。。
涉及到的jquery方法可能有,算了,类似于
var eles=$(document).find('[data-rel]');//假设那个data是data-rel
for(var e in eles){
if(eles.hasownproperty(e)){
//一定要有这个。。。不然会浪费循环,或者你用var e=0;e<eles.length;e++
var ele=eles.eq(e)
,data_rel=ele.data('rel');
if(data-rel=='xxxx'){//你自己的判断
//你自己需要的操作
}
}
}
看了下目前仅有的一个答案,上来就“修正”,“data-* 是 jquery 的”。我就奇怪了,自定义属性和 jquery 有什么必然联系?不要误导人好么。。。 =.=
手机码代码麻烦,一会补充回答问题。
到公司了,补充一下吧,在期望的 trigger 上监听事件(当然如果比较多就在父元素上做 delegate),然后 getAttribute
通过期望的 data 属性获取到目标(当然最好这个功能做成可配置的),然后 querySelector
(当然你这里是 id 就直接 getElementByID
了)找到目标并修改样式,修改样式的部分可以添加删除 class 的方法来完成,以方便之后扩展到 css3 的动画(当然用 JS 动画的可以无视)。