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

Posted

技术标签:

【中文标题】如何使用 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);
);

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

【讨论】:

以上是关于如何使用 jQuery 检索单击元素的属性? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Jquery 更改 Angular-UI 元素属性

jQuery 事件委托未检索表内容

使用jQuery检查元素是否为“display:none”或单击时阻止

每个类的jquery单击事件以查找href属性

如何使用 jQuery 获取元素的边框颜色值?

Jquery 给多个含义相同class属性的元素,统一添加单击事件