Question

好的，所以我试图从父div获取data-属性，而不是从每个锚获取它。我试过使用最近的，但这不起作用。这是我的以下代码。

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

我做错了什么？或者这是不可能的？

Answer 1

你也可以找到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>

Answer 2

您需要指定哪个元素最接近

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

Answer 3

如果我理解正确，你想从父div中获取颜色，如果是这样，请使用parent（）函数，如下所示：

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

这是fiddle。

Answer 4

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

如何使用jQuery单击来自父级的子项时获取数据值？

4 个答案: