javascript - 获取元素的所有数据属性及其在 jquery 中的值

Question

我有一个元素定义如下:

<span class="road-btn js-road-btn" data-lat-s=' + row.LatL + ' data-lng-s=' + row.LongL + ' data-lat-e=' + row.LatD + ' data-lng-e=' + row.LongD +'> <i class="icon-pin"></i ></span > 

我在这个元素上执行了一个点击事件:

$('.js-road-btn').on('click', function () {
    var latS = $(this).attr('data-lat-s');
    var longS = $(this).attr('data-lng-s');
    var latE = $(this).attr('data-lat-e');
    var longE = $(this).attr('data-lng-e');
});

我不想单独获取每个属性，而是想检索所有属性值作为一个整体。然后我单独访问这些属性。我怎样才能在 jquery 中实现这一点？

Answer 1

您可以使用 jQuery 方法 .data() 喜欢:

$(this).data(); //Will return the set of all the data-* attributes

$('.js-road-btn').on('click', function() {
  var attributes = $(this).data();

  console.log(attributes);

  alert(attributes.lngE);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="road-btn js-road-btn" data-lat-s='1' data-lng-s='2' data-lat-e='3' data-lng-e='4'> Click me </span >