数据属性在 JQuery 中返回未定义

Question

这之前对我有用，但停止工作了。我正在尝试获取数据属性，以便我可以通过 AJAX.

添加到购物车

更新：我的目标是从 data-variant-id 属性获取数据，以便我可以通过 Shopify 的 AJAX API 添加到购物车。以前，我有一个显示添加到购物车的按钮，效果很好。突然，当我添加图标标签时，按钮停止工作了。

这是片段：

// Fake Shopify
const Shopify = {
  addItem (id, qty, cb) {
    console.log("Shopify.addItem - id: %s, qty: %i", id, qty)
    setTimeout(cb, 200)
  }
}

const refreshCart = () => console.log("refreshCart")

$('[data-variant-id]').each(function() {
  $(this).on('click', function(e) {
    e.preventDefault();
    var button = e.target
    var variantId = button.dataset.variantId

    console.log('variantId', variantId);

    // Add Item to cart
    Shopify.addItem(variantId, 1, function() {

      // Now its added. lets refresh the cart drawer
      refreshCart();

      // Now its refreshed. Lets open the drawer
      $('[data-drawer-trigger]')[0].click();
    })
  })
})

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
[data-drawer-trigger] { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<button data-variant-id="40173189300410" value="Add to Cart" class="btn-icon"><i class="fas fa-shopping-cart"></i></button>

<button data-drawer-trigger>Drawer Trigger Button</button>

Answer 1

var button = e.target

这是你的问题。

当您单击该按钮时，您很可能实际上单击了 <i>，它是由 e.target 标识的元素。

事件冒泡到触发您的事件处理程序的按钮，但随后您的 <i> 没有任何 data-* 属性，因此 button.dataset.variantId 是 undefined。

简单的解决方案是在绑定到 event currentTarget（您添加处理程序的元素）的事件处理程序中使用 jQuery 的 this 绑定。你也不需要 .each()

$('button[data-variant-id]').on("click", function(e) {
  e.preventDefault()
  const variantId = this.dataset.variantId // note `this`

  console.log('variantId', variantId);

  // Add Item to cart
  Shopify.addItem(variantId, 1, function() {

    // Now its added. lets refresh the cart drawer
    refreshCart();

    // Now it's refreshed. Lets open the drawer
    $('[data-drawer-trigger]').eq(0).click(); // using `.eq(0)` is safer
  })
})

此外，您的图标应该是

<i class="fas fa-shopping-cart"></i>

注意 fas class 名称，不是 far。

数据属性在 JQuery 中返回未定义

Data attribute is returning undefined in JQuery

javascript

jquery

shopify