现在做的一个小系统为了达到领导所说的很炫的效果有用到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. UVa 10054 The Necklace BFS+建模欧拉回路

    算法指南 主要就是建立欧拉回路 #include <stdio.h> #include <string.h> #include <iostream> #includ ...

  2. git diff old mode 100755 new mode 100644

    755 vs 644 在linux下载了Qt的软件仓库,拷贝了一份到windows下.在 msysgit 下,发现所有的文件都被修改了. 用 git diff 查看,发现是: $ git diff u ...

  3. Python默认编码错误SyntaxError: Non-ASCII character '\xe5'之解决方法

    在编写Python时,当使用中文输出或注释时运行脚本,会提示错误信息: SyntaxError: Non-ASCII character '\xe5' in file ******* 解决方法: py ...

  4. debug.keystore文件不存在解决办法

    重装系统之后,丢失了debug.keystore,找了很久都没有找到,根据网上所讲的只要重新运行一个android项目;就会在avd中生成一个新的debug.keystroe,此法也没解决,索性直接重 ...

  5. 在java项目中应用ueditor

    虽然百度ueditor的官网和文档都已经很详细了.但是自己还是记录下 自己使用uEditor的过程. 这是 他的官网 http://ueditor.baidu.com/website/  例子 文档什 ...

  6. 深入了解Angularjs指令中的ngModel

    关于AngularJs的指令的知识学习,请参考... 这次我们接上次没讲完的知识继续. 前端人员在设计表单逻辑时, 在大部分情况下,我们需要为表单定义很多指令, 比如比较两个input内的值是否相同, ...

  7. JDBC连接MySQL数据库

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...

  8. docker-proxy 实现容器代理访问

    可实现多个容器web主机对外提供访问 运行代理容器 nginx-proxy docker run -d -p 80:80 -v /var/run/docker.sock:/tmp/docker.soc ...

  9. 2014 百度之星题解 1002 - Disk Schedule

    Problem Description 有非常多从磁盘读取数据的需求,包含顺序读取.随机读取.为了提高效率,须要人为安排磁盘读取.然而,在现实中,这样的做法非常复杂.我们考虑一个相对简单的场景. 磁盘 ...

  10. (转载)github简单使用教程

    github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公共仓库,也就是代码要公开.对于一般人来说公共仓库就已经足够了,而且我们也没多少代码来管理,O(∩_∩)O ...