如何使用 jQuery 检索单击元素的属性？ [复制]

Posted 2023-05-07

【中文标题】如何使用 jQuery 检索单击元素的属性？ [复制]

【英文标题】：How can I retrieve the attribute of a clicked element with jQuery? [duplicate]

【发布时间】：2020-09-20 07:29:21

【问题描述】：

我正在使用 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) 应该引用对象，即事件被调用，但似乎情况并非如此。

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

【问题讨论】：

喜欢人们重新发明单选按钮。

因为当你使用箭头函数时，this 将不是你点击的那个。

@epascarello 这是由插件生成的，无法控制

【参考方案1】：

你应该使用 .attr 函数：

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

不要使用箭头函数很重要，因为使用箭头函数时不能调用它。

【参考方案2】：

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

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

【参考方案3】：

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

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