转：data-url的运用。也就是html5里面的data-*的运用

下面是代码实例。

html这里

<a href="#">
<i class="fa fa-building-o"></i>
<span class="groups" data-url="{{URL('inext-admin/summary/groups/'.$group['id'].'/systems')}}">{{$group['name']}} </span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i> 
<span class="label label-primary pull-right">{{count($group['systems'])}}</span>
</span>
</a>

JS这里。

$(function() {
  $(".sidebar .groups").click(function(e) {
  if($(this).hasClass('disabled')) {
  setModalMessage();
  $('#myModal').modal('show');
  return false;
  }
    e.stopPropagation();
    var url = $(this).data("url");
    window.location.href = url;
  });

});

说白了，就是html5提供了一个data-*这个属性，你可以写任意一个data-one,data-two,都可以，

然后js的dom就会读到你写的这个属性，拿到里面的值。

当然你可以自己通过JS自己追加属性。也可以改变里面的值。

<div id="test" data-age="24">       Click Here    </div>

var test = document.getElementById('test');

        test.dataset.my = 'Byron';

这种元素都会有dataset属性。这样就追加了一个data-my的属性（id=test），

取得：

var test = document.getElementById("test");

//getAttribute()取值属性
console.log(test.getAttribute("data-age"));
//setAttribute()赋值属性
test.setAttribute("data-age","48");

//data-前缀属性可以在JS中通过dataset取值，更加方便

console.log(test.dataset.age);
//赋值
tree.dataset.age = "30";
tree.dataset.age--;

tree.dataset.age++;

---------------------
作者：一勺盐
来源：CSDN
原文：https://blog.csdn.net/hxdafei1989/article/details/72869216
版权声明：本文为博主原创文章，转载请附上博文链接！