如何使用jQuery從父級點擊兒童時獲取數據值？

好的，所以我試圖從父div獲取數據屬性，而不是從每個錨點獲取數據屬性。我嘗試使用最接近的，但不起作用。這是我的下面的代碼。如何使用jQuery從父級點擊兒童時獲取數據值？

<div class="cat black"> 
    <a class="cat_col" data-color="black">Tom</a> 
    <a class="cat_col" data-color="black">Cotton</a> 
    <a class="cat_col" data-color="black">Major</a> 
</div>

，這是jQuery代碼我有：

$('body').on('click', '.cat_col', function(event) { 
    event.preventDefault(); 
    var $CatColor = $(this).data("color");     
    getCats ($showCategory); 
});

我沒有這個問題，但一旦我開始填充的東西，它會得到一個有點混亂，再加上有會有更多的選擇。所以，我想知道是否可以從父div獲取數據，而不是每個孩子。所以，做這樣的事情。

<div class="cat black" data-color="black"> 
    <a class="cat_col">Tom</a> 
    <a class="cat_col">Cotton</a> 
    <a class="cat_col">Major</a> 
</div> 

$('body').on('click', '.cat_col', function(event) { 
    event.preventDefault(); 
    var $CatColor = $(this).closest.data("color");     
    getCats ($showCategory); 
});

我在做什麼錯？或者這僅僅是不可能的？

來源

2017-01-27 Divern

你需要指定哪個元素最接近

$('body').on('click', '.cat_col', function(event) { 
    event.preventDefault(); 
    var $CatColor = $(this).closest('.cat').attr('data-color');     
    getCats ($showCategory); 
});

來源

2017-01-27 19:00:02

哇，太感謝你了。 – Divern

如果我理解正確的話，你想從父DIV的顏色，如果是使用像這樣的父（）函數：

$('body').on('click', '.cat_col', function(event) { 
    event.preventDefault(); 
    var $CatColor = $(this).parent().data("color");     
    console.log($CatColor); 
});

這裏是一個fiddle。

來源

2017-01-27 19:12:19 kiasta

謝謝。這也適用。 – Divern

$('body').on('click', '.cat_col', function(event) { 
    event.preventDefault(); 
    var $CatColor = $(this).parent().data("color"); 
    alert($CatColor); 
    getCats ($showCategory); 
});

來源

2017-01-27 19:15:41

您還可以找到closest("div")以及

$('body').on('click', '.cat_col', function(event) { 
 
    event.preventDefault(); 
 
    var $CatColor = $(this).closest("div").data("color");     
 
    alert($CatColor); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cat black" data-color="black"> 
 
    <a class="cat_col">Tom</a> 
 
    <a class="cat_col">Cotton</a> 
 
    <a class="cat_col">Major</a> 
 
</div>

來源

2017-01-27 19:19:04 Curiousdev

如何使用jQuery從父級點擊兒童時獲取數據值？

回答

相關問題