javascript - 从同一外部容器中的另一个链接获取 html data-* 属性

Question

下面是 HTML 代码，用于生成包含 woocommerce 产品列表中的一种特定产品的部分。我在第一个链接中放置了一个函数 directLink()，这样我就可以使用最后一个链接<中的“data-product_sku”将用户重定向到页面。/strong> 该部分。

通过点击，我什至只能设法在页面上找到该特定链接，但我无法从中获取 data-product_sku 数据，除非只是将其解析为字符串，但我确信有办法找到它直接使用 JavaScript。

html:

<li class="post-2028">
  <a href="http:..." class="woocommerce-LoopProduct-link">
    <span onclick="directLink(event); return false;">
      First Link
    </span>
    <div itemprop="description">
    <p>...Product Description...</p>
    </div>
  </a>
  <a href="http:..." data-quantity="1" data-product_id="2028" data-product_sku="323">
    Last Link
  </a>
</li>

js:

function directLink(e) {
    var elmnt = e.path[2].children[1];
}

我明白

elmnt = '<a href="http:..." data-quantity="1" data-product_id="2028" data-product_sku="323">Last Link</a>'

我也尝试过:

var elmnt = e.path[2].children[1];
$(elmnt).data('product_sku');

但这给出了未定义

如何通过js获取该属性？

Answer 1

您应该执行以下操作:

e.path[2].children[1].dataset.product_sku

将返回您期望的内容323