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() ，如：

master

$(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);
});

Answer 2

由于这些值都存储在data-*属性中，因此您可以使用data()（不带参数）在单个对象中检索它们：

＆＃13;

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

＆＃13;

<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="lat-s" data-lng-s="lng-s" data-lat-e="lat-e" data-lng-e="lng-e"> 
  Click me
</span>

＆＃13;

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

2 个答案: