现在做的一个小系统为了达到领导所说的很炫的效果有用到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. javaweb要点复习 jsp和servlet

    jsp:就是java server page ,  html嵌入java  ,所以更方面显示(V) serlet,就是服务器端小程序 java中嵌入html,更方面业务处理. jsp执行过程 1)客户 ...

  2. Java web.xml加载顺序

     web.xml加载过程(步骤): 1.启动WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点:   <listener></listener&g ...

  3. javascript日志框架使用

    1.在页面中引入js文件 官网:http://log4javascript.org/index.html ```javascript <script src="http://cdn.b ...

  4. Color

    http://poj.org/problem?id=2154 题意:经典polya题 解析:差别就是项链数目不定,采用欧拉函数,求出所有情况求解即可 // File Name: poj2154.cpp ...

  5. 即时通讯(IM)

    即时通讯(IM)功能是APP的重要功能之一,而开发好移动IM却绝非易事.通常来说,IM技术选型至少要解决以下问题:1. 协议选型 2. IM服务器选型 3. 对协议和服务器做相应修改,通常来说直接拿个 ...

  6. SCTP 关联的建立和终止

    与TCP一样,SCTP也是面向连接的,因而也有关联的建立与终止的握手过程.不过SCTP的握手过程不同于TCP. 四路握手 建立一个SCTP关联的时候会发生下述情形(类似于TCP). (1)服务器必须准 ...

  7. pugixml

    http://www.firedragonpzy.com.cn/index.php/archives/3227 有关cocos2d-x的xml文件读取问题

  8. git操作github

    转自http://www.cnblogs.com/fnng/archive/2012/01/07/2315685.html 怕找不到~ 本文在我之前的那篇<git/github学习笔记>的 ...

  9. CentOS 6.7平台Hadoop 1.2.1环境搭建

    本教程使用Vultr的VPS搭建,主要实现HDFS和MapReduce两个功能. master.hadoop - 45.32.90.100 slave1.hadoop - 45.32.92.47 sl ...

  10. C#将DataTable导出Execl、Word、Xml

        /// <summary>     /// 将DT转换为Execl的方法     /// </summary>     /// <param name=" ...