现在做的一个小系统为了达到领导所说的很炫的效果有用到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. bzoj 3626 [LNOI2014]LCA（离线处理+树链剖分，线段树）

    3626: [LNOI2014]LCA Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1272  Solved: 451[Submit][Status ...

  2. JavaScript高级程序设计36.pdf

    TreeWalker TreeWalker是NodeIterator的更高级的版本,除了包括nextNode()和previousNode()在内的相同功能外,这个类型还提供了用于不同方向上遍历DOM ...

  3. jQuery 参考手册 - 事件

    事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. bind()向匹配元素附加一个或更多事件处理器 $(selector).bind(event,function) $(select ...

  4. Centos6.4 xen编译部署

    ruiy亲测成功,现将步骤总结如下,一步步往下将可 原文链接 http://blog.csdn.net/liyakun1992421/article/details/9071061 xen 与 kvm ...

  5. Android学习路线图

    第一阶段:Java面向对象编程 1.Java基本数据类型与表达式,分支循环. 2.String和StringBuffer的使用.正则表达式. 3.面向对象的抽象,封装,继承,多态,类与对象,对象初始化 ...

  6. java +bootstrap table 完整例子

    需求:现在常用的table 插件很多, 比如 jquey datatables ,不过操作挺 麻烦, 看到推荐的bootstrap 自带的 table,就用到项目来,先看效果:

  7. UVA - 10239 The Book-shelver&#39;s Problem

    Description Problem D The Book-shelver's Problem Input: standard input Output: standard output Time ...

  8. hibernate.hbm.xml配置文件内容说明

    下面是一个自动生成的配置文件: <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate-configuration PU ...

  9. 两款Mac下的视频下载利器

    1 iSkysoft iTube Studio 2.jaksta mac

  10. Jquery调用从ashx文件返回的jsonp格式的数据处理实例

    开发环境:vs2010+jquery-1.4.min.js 解决问题:网上代码比较少,好多调试不通,返回数据不用json而用jsonp主要考虑解决跨域问题 开发步骤:打开VS2010,新建一web站点 ...