data-*的用法

我从后台获取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>

js

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     }

 

posted @ 2019-01-17 18:26  薄荷zz  阅读(884)  评论(0编辑  收藏  举报