admin 发表于 2024-5-25 18:25:46

如何获取data-id中的值

一般的讲,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的值呢?
有两种方式,直接上代码,如下:
<!DOCTYPE html>
<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的值。
页: [1]
查看完整版本: 如何获取data-id中的值