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数据请求，从而达到交互更流畅

原文地址：https://www.cnblogs.com/yuan-luo/p/8480339.html