如何使用 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 或类。

我认为$(this)应该指的是调用事件的对象，但似乎并非如此。

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

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

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