获取锚

Question

我需要编写一些事件，其中application包含一系列锚链接，其中包含data-attribute中的不同数据。我有一个事件（点击可能），它可以为点击的锚点提取数据属性值data-product-d和data-product-name

我的HTML看起来像

<div class="product-availibility">
  <p>Available from Etsy starting at <strong>$26</strong>
  </p>
  <a class="button lnk_tracking" href="https://www.etsy.com/listing/269790426/name-necklace-gold-name-necklace-gold" target="_blank" rel="nofollow" data-product-id="Non-Amazon" data-product-name="Name Necklace">See Now</a>
</div>

有近10个同类的div。点击锚点后，需要提取数据属性

Answer 1

基于对上述问题的评论......

$('.product-availibility a').on('click', () => {
  alert(this.tagName);
  alert($(this).closest('button lnk_tracking').data('data-product-id'));
});

1. 您不需要（或想要）在此使用.closest()。 <a>是您要查找的元素，此事件已针对该元素。
2. 即使您使用.closest()，您传递给它的选择器也在寻找结构<button><lnk_tracking /></button>，当然这种结构不存在。 （看起来你打算使用类选择器，它在你的第一个选择器中以.为前缀。）
3. 使用.data()功能时，请勿为密钥添加'-data'前缀。只需使用密钥本身。

听起来你正在寻找这个：

$('.product-availibility a').on('click', function () {
  console.log($(this).data('product-id'));
});

Example

请注意，我还将() =>结构更改为function ()。我不确定这是否只是在jsFiddle中打破，或者是否有必要。说实话，我之前并没有真正使用() =>语法。但函数语法正在运行。

Answer 2

    $('.product-availibility a').on('click', function() {
            console.log($(this).data('product-id'));
    });