现在做的一个小系统为了达到领导所说的很炫的效果有用到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. 现代Web的资源/类型/元素--发展趋势

    5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册.伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册. 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译 ...

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

    操作节点 appendChild()用于向childNodes列表末尾添加一个节点,appendChild()返回新增的节点 var returnedNode=someNode.appendChild ...

  3. tail head命令

    显示1.txt的最后2行    tail -2 1.txt 显示1.txt的最后1行    tail -n 1 1.txt    tail -1 1.txt 显示1.txt的最后10行 tail 1. ...

  4. ThinkPHP 快速入门

    1. 框架简介 框架是程序结构代码的集合,而不是业务逻辑代码.集合中包含了很多类.函数和功能类包.这个集合是按照一定标准组成的功能体系.体系有很多设计模式,比如MVC等. 2. ThinkPHP框架学 ...

  5. SignalR及时通知功能

    功能需求,现时已经编写了一个hub能够,将后台的消息发送至前台中,并给出提示,但如后台已经发生了变化,由内部调用消息时,应该怎样处理? 1.编写Hub类 using System.Collection ...

  6. hibernate性能消耗太狠了。果断减肥引发的连串意外惊喜

    近期在云服务器上新部署了一个项目 硬件配置 CPU: 2核    内存: 4096 MB (I/O优化) 开始是调试测试在用 没发觉,今天我看了下监控 cpu使用率达到了60-70% 而且一直持续 我 ...

  7. C#使用Sockets操作FTP【转载】

    using System; using System.Collections; using System.IO; using System.Net; using System.Net.Sockets; ...

  8. [D3] 6. Color Scale

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. linux下so动态库一些不为人知的秘密 系列

    http://blog.chinaunix.net/uid-27105712-id-3313293.html http://www.cnblogs.com/gulvzhe/archive/2012/0 ...

  10. MYSQL参数学习---------------- 张碧池

    http://pottievil.com/category/mysql/mysql%E5%8F%82%E6%95%B0/