data-*的用法

最新推荐文章于 2023-11-13 16:24:00 发布

weixin_33939380

最新推荐文章于 2023-11-13 16:24:00 发布

阅读量462

点赞数

原文链接：http://www.cnblogs.com/zfdbk/p/10283824.html

版权

我从后台获取2份合同，一份需要点击下载，另一份无需下载，但是因为是遍历出来的所以就不方便写两个点击事件，但是通过data-* 就可以写一个点击事件实现多个不同的事件。

我这边通过一个简单的demo记录一下data的用法同时记录下data在w3c的地址 http://www.w3school.com.cn/tags/att_global_data.asp

此demo通过给data-1="1"一个固有属性，达到当我点击（我是小花）的时候，alert（111），当我点击（我是小猫）的时候，alert（222）

html

1     <!--一个点击事件。根据点击事件里某一固有属性给每个li嵌入自定义事件  -->
2 <ul>
3   <!--ShowDetails(this) 同一个点击事件  -->
4   <li onclick="ShowDetails(this)" data-l = "1">我是小花</li>
5   <li onclick="ShowDetails(this)" data-l = "2" >我是小猫</li>
6 </ul>

1     function ShowDetails(num){
2       var nums = num.getAttribute("data-l");
3       if (nums == 1) {
4       alert(1111111)
5       }else {
6         alert(2222222)
7       }
8     }