现在做的一个小系统为了达到领导所说的很炫的效果有用到Metro UI CSS，但是因为如何给每个磁贴(div标签)的click事件传递参数折腾了蛮久(偶是菜鸟)，后来终于找到一个解决方案即通过data-*属性，下面分别为jQuery和js实现：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

         <script src="js/jquery/jquery.min.js"></script>

         <script>

             $(document).ready(function(){

                 $(".title").click(function(){

                     var id=$(this).data("id");

                     var name=$(this).data("name");

                     alert("Id: "+id+" ; Name: "+name);});

             });

             function onClick(e){

                 var id=e.getAttribute("data-id");

                var name=e.getAttribute("data-name");

                 alert("Id: "+id+" ; Name: "+name);

             }

         </script>

    </head>

    <body>

        <div class="title" data-id="1" data-name="Microsoft">Click Me</div>

        <div id="add" data-id="2" data-name="Google" onclick="onClick(this)">Click Me</div>

    </body>

</html>

参考：Getting data-* attribute for onclick event for an html element

如何给html元素的onclick事件传递参数(即如何获取html标签的data-*属性)的更多相关文章

  1. 如何给html元素的onclick事件传递参数即如何获取html标签的data

    某些非text元素,如a.button等用于触发时间的标签可已将要传的数据放在一个属性中,如data,这个属性必须是不影响样式的,可以使用任意非html定义的名字命名属性,然后将数据传到属性中, &l ...

  2. Unity3D Button组管理（给按钮的onclick事件“传递参数”）

    using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.UI; // ...

  3. 巧妙使用Jquery 改变元素的 onclick 事件

    需要点击图片将套组发布, 页面代码: <img width="20px" src=" <s:property value="IMAGES_PATH& ...

  4. 为listview的item中的元素设置onclick事件

    表达能力比较差,所以现在解释一下标题的意思:listview的列表项,点击的时候触发的是itemOnClick事件,点击后转向到A页:那么,假如在子项中有一个连接是想转到B页,我们该怎么办呢.这样能明 ...

  5. 关于javaScript注册事件传递参数的浅析

    最近这半年作为一个java 程序员,我写的javaScript代码都快比java代码多了,前段时间是给某银行做一个柜员管控系统,在柜员授权这一块功能上,由于柜员的授权需要考虑各方面的因素,比如机构权限 ...

  6. HTML通过事件传递参数到js 二 event

    原文链接http://blog.sina.com.cn/s/blog_8a18c33d010172pp.html event用例: <!DOCTYPE html><html>& ...

  7. [ActionScript 3.0] AS3.0 给flash事件传递参数的方法

    有时我们想要给flash内置的事件(比如MouseEvent)传递参数,这时我们可以用到下面的方法. import flash.events.MouseEvent; mc.addEventListen ...

  8. HTML通过事件传递参数到js一

    原文链接:http://bbs.51cto.com/thread-1098421-1-1.html 目标处理函数为selectAttr(test) 1.直接传递给定参数如: onclick=" ...

  9. angularjs为ng-click事件传递参数

    在angularjs开发中,我们需要为ng-click事件传递一个参数. 在js中,可以接到参数: 演示:

随机推荐

  1. JS倒计时 代码

    JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...

  2. .Net 调式案例—实验4 高CPU（High CPU）回顾

    原文地址:http://blog.csdn.net/directionofear/article/details/8033506 如果Web应用程序经常遇到的问题按频率排名的话,我觉得 第一名unha ...

  3. Ubuntu 下安装Kibana和logstash

    原文地址:http://www.cnblogs.com/saintaxl/p/3946667.html 简单来讲他具体的工作流程就是 logstash agent 监控并过滤日志,将过滤后的日志内容发 ...

  4. Java项目中基于Hibernate分页总结

    1,First of all,  we should have a wrapper class for page,this class can calculate the startRow by th ...

  5. 主流智能手机屏幕材质介绍 及 LCD闪屏现象分析

    TN            TN(Twisted Nematic) 即扭曲向列型面板,属于有源矩阵液晶显示器中的一种.由于TFT是主动式矩阵LCD可让液晶的排列方式具有记忆性,不会在电流消失后马上恢复 ...

  6. 如何使用chown？

    以test为例,目前test归root用户拥有,也归root组拥有 [root@localhost home]# ls -al total 36 drwxr-xr-x    6 root     ro ...

  7. Lattice Diamond安装

    1.下载:到Lattice官网 http://www.latticesemi.com/ 注册一个lattice的账号后就可以去下载Diamond,登陆后如下图,根据自己系统情况选择对应的版本,我用的是 ...

  8. hdoj1754 I Hate It【线段树区间最大值维护+单点更新】

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  9. Hibernate查询之SQL查询

    转自: Hibernate还支持使用SQL查询,使用SQL查询可以利用某些数据库的特性,或者用于将原有的JDBC应用迁移到Hibernate应用上.使用命名的SQL查询还可以将SQL语句放在配置文件中 ...

  10. PostgreSQL相关的软件，库，工具和资源集合

    PostgreSQL相关的软件,库,工具和资源集合. 备份 wal-e - Simple Continuous Archiving for Postgres to S3, Azure, or Swif ...