html自定义data属性

可以在HTML标签上添加任意以 "data-"开头的属性，这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。

例子：<div class="my-data" data-category="motion">test data</div>

如何读取自定义data属性数据呢？

jquery已经有现成的方法：

var myData = $(".my-data")data("category");//这样就能返回对应的值

你也可以在data-*属性中使用json语法：

例如：<div id="my-data" data-category='{"game":"on"}'></div>

你可以通过js直接访问这个数据，通过json的key值，你能得到相应的value：

var gameStatus= $(".my-data").data("category").game;

 

通过自定义data属性，可以让交互变得更简单：

例如：

<ul class="video-aside" id="video-nav">
    <li class="video-aside-item nav-selected" data-category="all">
        <span class="video-aside-text">全部视频</span>
    </li>
    <li class="video-aside-item" data-category="motion">
        <span class="video-aside-text">运动视频</span>
    </li>
    <li class="video-aside-item" data-category="navigation">
        <span class="video-aside-text">导航视频</span>
    </li>
    <li class="video-aside-item" data-category="steer">
        <span class="video-aside-text">舵机视频</span>
    </li>
    <li class="video-aside-item" data-category="visual">
        <span class="video-aside-text">视觉视频</span>
    </li>
</ul>

<div class="video-item" data-category="motion">
　　<video src=""></video>
</div>

<div class="video-item" data-category="navigation">
　　<video src=""></video>
</div>

<div class="video-item" data-category="navitation">
　　<video src=""></video>
</div>

<div class="video-item" data-category="motion">
　　<video src=""></video>
</div>

<div class="video-item" data-category="steer">
　　<video src=""></video>
</div>

<div class="video-item" data-category="visual">
　　<video src=""></video>
</div>

jQ控制：

$(".video-aside-item").click(function (e) {
    var _this = e.currentTarget;
    $(_this).addClass("nav-selected").siblings().removeClass("nav-selected");
    var dataCategory = $(_this).data("category");
    if(dataCategory == 'all'){
        $(".video-item").show();
        return;
    }
    $(".video-item").each(function () {
        var itemCategory = $(this).data("category");
        if(dataCategory == itemCategory){
            $(this).show();
        }else{
            $(this).hide();
        }
    });
});
这样在进行切换的时候，就不需要进行ajax数据请求，从而达到交互更流畅