如何获取data-id中的值

admin

一般的讲，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. 
    
22. </html>

复制代码

运行结果如下：

从控制台可以看出有两个12的值，第一个就是f1的值，第二个是f2的值。