Question

我想在anchor标记在我的console.log中有活动类时显示数据属性

不幸的是，它始终输出null值。

这是我的 HTML ：

＆＃13;

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

＆＃13;

<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>

＆＃13;

请帮助我跟上发展的步伐。

提前谢谢

Answer 1

因此，在包含"active"类的div中找到list-group类，因此请使用$('.list-group').find('.active').data('itemtype')选择器代替$('.list-group a').find('.active').data('itemtype')。

您的选择器$('.list-group a').find('.active').data('itemtype')将尝试在div的active标记中找到a类，其中list-group类正在产生问题。

请查看工作片段。

$(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>

Answer 2

Try this one  

$(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').attr('data-itemtype');

        console.log(itemType);

    });

});

Answer 3

您的代码没有用，因为anchor在使用语句$('.list-group a').find('.active')时没有子/后代元素，因此您获得了undefined，在这里您可以使用{{3}而不是.filter()

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

您在之前的声明中添加了active类。直接使用$(e.target).data('itemtype');，

根据HTML，您也可以使用this代替e.target。

＆＃13;

jQuery(document).ready(function() {

  $('.list-group-item').on('click', function(e) {

    //Remove active class from siblings 
    $(this).closest(".list-group").children(".active").removeClass('active')

    // activated list-item
    $(this).addClass('active');
    var itemType = $(this).data('itemtype');

    console.log(itemType);
  });
});

＆＃13;

<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>

＆＃13;

Answer 4

我认为这应该可以帮到你

var itemtype=$(".list-group a.active").attr('data-itemtype')

Answer 5

我们走了 $（'。list-group-item'）。on（'click'，function（e）{

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

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

}）;

Answer 6

@Terence，它始终输出find值，因为var itemType = $('.list-group a').find('.active').data('itemtype');函数获取后代元素。

此代码null会返回anchor，因为active中没有后代有一个名为data-attribute的类

您可以通过以下方式获取所需的$(document).ready(function() { $('.list-group-item').on('click', function(event) { var previous = $('.list-group-item.active'); previous.removeClass('active'); // previous list-item $(this).addClass('active'); // activated list-item var itemType = $(this).data('itemtype'); console.clear(); console.log(itemType); }); });。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.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>

xxx-theme.yml

JQuery - 在活动类时获取值data-attribute

6 个答案: