请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: 活动 交友 discuz
查看: 310|回复: 0

如何获取data-id中的值

[复制链接]
  • TA的每日心情
    开心
    2019-5-30 08:42
  • 签到天数: 10 天

    [LV.3]偶尔看看II

    493

    主题

    498

    帖子

    2293

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    2293
    admin实名认证 发表于 2019-5-23 11:05:41 | 显示全部楼层 |阅读模式
    一般的讲,data-id用于菜单栏的匹配,例如:
    1.   //一级菜单
    2.   <div class="wrap" id="test">
    3.     <ul>
    4.       <li data-id="a"><span>手机 / 运行商</span></li>
    5.     </ul>
    6.     //二级菜单
    7.     <div id="sub" class="none">
    8.       <div id="a" class="sub_content none">
    9.         <dl>
    10.           <dt>
    11.             <a href="#">电视<i>></i></a>
    12.           </dt>
    13.           <dd>
    14.             <a href="#">品牌&</a>
    15.           </dd>
    16.         </dl>
    17.       </div>
    复制代码
    上面代码的一级菜单的data-id要与二级菜单的id一致,那么我们怎么获取data-id的值呢?
    有两种方式,直接上代码,如下:
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head lang="en">  
    4.     <meta charset="UTF-8">  
    5.     <title></title>  
    6.     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script></script>
    7. </head>  
    8. <body>  
    9. <div id='plant' data-fruit='12'>来呀! </div>
    10.     <script type="text/javascript">  
    11.     $(function(){
    12.         $('#plant').hover(function(){
    13.             var f1 = $(this).data('fruit');
    14.             var f2 = $(this).attr('data-fruit');
    15.         console.log(f1);
    16.         console.log(f2);
    17.         })
    18.     })
    19.     </script>
    20. </body>  

    21. </html>
    复制代码
    运行结果如下:
    20170808212424249.png
    从控制台可以看出有两个12的值,第一个就是f1的值,第二个是f2的值。
    maomivip@mail.com
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|赢创志诚服务网 ( 鲁ICP备19000917号 )

    GMT+8, 2019-8-20 14:13 , Processed in 0.060285 second(s), 24 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表