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

Question

我正在使用 wordpress 和 woocommerce，我想在选择产品变体时向运行添加一些脚本，其中 jQuery。

我在 html 中有一组 "buttons" 是这样的：

<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", () => {})

在处理程序中，我需要读取被单击的 "button" 的 data-value 属性。首先我尝试了：$(this).attr("data-value")。这返回了 undefined。我尝试使用 .data 而不是 attr 函数，结果相同。

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

我以为$(this)应该指的是事件被调用的对象，但好像不是这样。

我在这里错过了什么？在这种情况下，还有其他方法可以检索 "data-value" 的值吗？

Answer 1

您应该使用 .attr 函数：

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

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

Answer 2

如果您正在为处理程序使用箭头函数，请尝试改用 function 关键字。箭头函数将具有与其父上下文相同的 this 值，因此它不会让您访问您尝试读取的属性。

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

Answer 3

$(".adsw-attribute-option > .meta-item-text").on("click", e => {
  console.log($(e.target).data('value'));
  console.log(e.target.dataset.value);
});

如果你使用传入的事件，你可以使用箭头函数。

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

How can I retrieve the attribute of a clicked element with jQuery?

javascript

wordpress

jquery

jquery-selectors

woocommerce