html自定义data,html自定义data属性(示例代码)

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

例子：

test data

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

jquery已经有现成的方法：

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

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

例如：

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

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

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

例如：

• 全部视频

• 运动视频

• 导航视频

• 舵机视频

• 视觉视频

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