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

本文转载自查看原文 2014-11-25 22:53 14212 工作记录/ HTML5

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 关于Jquery.Data()和HTML标签的data-*属性获取data-*属性值 HTML data-* 属性的含义和使用 jQuery获取data-*属性值 html5 获取和设置data-*属性值的四种方法讲解 HTML元素（包括HTML5）的标签、属性及事件大全在onclick事件中传递对象参数使用 Razor 生成 HTML5 中的 data- 属性 HTML5：'data-'属性的作用是什么获取自定义属性、 data-* 的值