码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-11-26 01:14:10      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   sp   for   

最近好忙,吐个槽先。。。

现在做的一个小系统为了达到领导所说的很炫的效果有用到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-*属性)

标签:style   blog   http   io   ar   color   os   sp   for   

原文地址:http://www.cnblogs.com/walden1024/p/4122123.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!