javascript - JQuery - 在事件类时获取值数据属性

Question

当 anchor 标签在我的 console.log 中有一个事件类时，我试图显示 data-attribute

不幸的是，它总是输出一个null值。

我提到了这个stackoverflow question

这是我的HTML:

$(document).ready(function () {

  $('.list-group-item').on('click', function (e) {

    var previous = $(this).closest(".list-group").children(".active");
    previous.removeClass('active'); // previous list-item
    $(e.target).addClass('active'); // activated list-item

    var itemType = $('.list-group a').find('.active').data('itemtype');

    console.log(itemType);

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="list-group">
  <a href="#" class="list-group-item" data-itemtype="1">Cras justo odio</a>
  <a href="#" class="list-group-item" data-itemtype="0">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item" data-itemtype="3">Morbi leo risus</a>
  <a href="#" class="list-group-item" data-itemtype="4">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item" data-itemtype="2">Vestibulum at eros</a>
</div>

请帮助我走上正轨。

提前致谢

Answer 1

因为要在具有类 list-group 的 div 中找到 "active" 类，所以使用 $('.list-group').find(' .active').data('itemtype') 选择器代替 $('.list-group a').find('.active').data('itemtype').

您的选择器 $('.list-group a').find('.active').data('itemtype') 将尝试查找 active 类在具有类 list-group 的 div 的 a 标签中，这是问题所在。

请检查工作片段。

$(document).ready(function () {

  $('.list-group-item').on('click', function (e) {

    var previous = $(this).closest(".list-group").children(".active");
    previous.removeClass('active'); // previous list-item
    $(e.target).addClass('active'); // activated list-item

    var itemType = $('.list-group').find('.active').data('itemtype');

    console.log(itemType);

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group">
  <a href="#" class="list-group-item" data-itemtype="1">Cras justo odio</a>
  <a href="#" class="list-group-item" data-itemtype="0">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item" data-itemtype="3">Morbi leo risus</a>
  <a href="#" class="list-group-item" data-itemtype="4">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item" data-itemtype="2">Vestibulum at eros</a>
</div>