如何获取data-id中的值,data-id的具体用法

转自https://blog.csdn.net/ke3863834/article/details/76944265

一般data-id用于一些菜单栏的匹配,例如下面这个:
  //一级菜单
  <div class="wrap" id="test">
    <ul>
      <li data-id="a"><span>手机 / 运行商span>li>
    ul>
    //二级菜单
    <div id="sub" class="none">
      <div id="a" class="sub_content none">
        <dl>
          <dt>
            <a href="#">电视<i>>i>a>
          dt>
          <dd>
            <a href="#">品牌&a>
          dd>
        dl>
      div>

这里一级菜单中的data-id就需要与二级菜单中 的id相匹配,那如何获得data-id的值呢?

两种方法:

废话少说,上代码:

  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>title>  
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">script>script>
head>  
<body>  
<div id='plant' data-fruit='12'>来呀! div>
    <script type="text/javascript">  
    $(function(){
      
        $('#plant').hover(function(){
      
            var f1 = $(this).data('fruit');
            var f2 = $(this).attr('data-fruit');
        console.log(f1);
        console.log(f2);
        })
    }) 
    script> 
body>  

html>

下面两个“12”,前者为f1 的值,后者为f2的值,它俩是一样的,所以这两者方法都行的通。

下面两个“12”,前者为f1 的值,后者为f2的值,它俩是一样的,所以这两者方法都行的通。


你可能感兴趣的:(jQuery)