我如何使用jQuery检索单击元素的属性？

Question

我正在使用wordpress和woocommerce，并且我想添加一些脚本，以便在使用jQuery选择产品变体时运行。

我在html中有一组“按钮”，如下所示：

<div class="adsw-attribute-option">
  <span class="meta-item-text sku-set" data-value="s">S</span>
  <span class="meta-item-text sku-set" data-value="m">M</span>
  <span class="meta-item-text sku-set" data-value="l">L</span>
  <span class="meta-item-text sku-set" data-value="xl">XL</span>
  <span class="meta-item-text sku-set" data-value="xxl">XXL</span>
  <span class="meta-item-text sku-set" data-value="xxxl">XXXL</span>
</div>

我添加带有以下内容的点击侦听器：

$(".adsw-attribute-option > .meta-item-text").on("click", () => {})

并且在处理程序中，我需要读取被单击的“按钮”的data-value属性。首先，我尝试了：$(this).attr("data-value")。返回undefined。我试过用.data代替attr函数，结果相同。

$(this)的使用似乎有问题，我无法读取其任何属性，例如html或class。

我以为$(this)应该引用该对象，该事件已被调用，但似乎并非如此。

我在这里想念什么？在这种情况下，还有其他方法可以检索“数据值”的值吗？

Answer 1

您应该使用.attr函数：

$(".adsw-attribute-option > .meta-item-text").on("click", function () {
  $(this).attr('data-value');
});

重要的是不要使用箭头功能，因为使用箭头功能时无法调用它。