JQuery - 在活動類時獲取值data-attribute

Question

我試圖在我的console.log中anchor標記具有活動類時顯示data-attribute

不幸的是，它總是輸出一個null值。

我提到了這個stackoverflow問題

這是我的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')將嘗試在div a標簽中找到active類，其中class 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

你的代碼沒有用，因為當使用語句$('.list-group a').find('.active')時， anchor沒有子/后代元素.filter() $('.list-group a').find('.active')因此你得到了undefined ，你可以在這里使用.filter()而不是.find()

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

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

根據HTML，您也可以使用this而不是e.target 。

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

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

我認為這應該對你有幫助

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

Answer 5

以下是$('.list-group-item').on('click')事件的示例

$('.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，它總是輸出一個null值，因為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>