javascript - 能用html5的data=*自定义属性去对应元素的id做隐藏显示？

Question

data自定义属性可以做这个隐藏显示吗？

          <p 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>
          </p>

<p id="tabAutoPlay1"  style="display:block;"></p>
<p id="tabAutoPlay2"  style="display:none;"></p>
<p id="tabAutoPlay3"  style="display:none;"></p>


知道的大神，希望能提供个玩具代码看看。

Answer 1

看了下目前仅有的一个答案，上来就“修正”，“data-* 是 jquery 的”。我就奇怪了，自定义属性和 jquery 有什么必然联系？不要误导人好么。。。 =.=

手机码代码麻烦，一会补充回答问题。

到公司了，补充一下吧，在期望的 trigger 上监听事件（当然如果比较多就在父元素上做 delegate），然后 getAttribute 通过期望的 data 属性获取到目标（当然最好这个功能做成可配置的），然后 querySelector（当然你这里是 id 就直接 getElementByID 了）找到目标并修改样式，修改样式的部分可以添加删除 class 的方法来完成，以方便之后扩展到 css3 的动画（当然用 JS 动画的可以无视）。

Answer 2

修正一下，.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'){//你自己的判断
                  //你自己需要的操作
            }
        }
    }