如何获取点击按钮的data属性值并在AJAX表单提交中使用？

我来帮你搞定这个问题～你现在的代码没法正确拿到点击按钮的data-id，核心问题是你用了所有按钮的集合cartButton去取dataset.id，但它根本不是单个被点击的元素。下面是具体的修改步骤：

1. 在点击事件中获取当前按钮的data-id #

首先修改addToCard函数，利用事件回调里的this（它指向当前被点击的按钮）拿到data-id，然后把这个ID传递给后续的用户/访客添加购物车函数：

function addToCard() {
  // 拿到当前点击按钮的data-id
  const productId = this.dataset.id;
  $.ajax({
    url: "/auth/check",
    context: document.body,
    success: function(status){
      if (status === "Auth") {
        addToCardForUsers(productId); // 把ID传进去
      } else {
        addToCardForGuests(productId); // 访客函数也同理传递ID
      }
    }
  });
}

2. 修改用户添加购物车函数接收并使用ID #

接下来调整addToCardForUsers函数，让它接收传递过来的productId，然后在AJAX的URL里使用这个值：

function addToCardForUsers(productId) {
  $.ajax({
    type: 'POST',
    url: "/cart/add-product/" + productId, // 这里用传递过来的ID
    context: document.body,
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function(){
      // 先确保countProduct是正确的DOM元素（替换成你实际的选择器即可）
      const countProduct = $('.cart-product-count');
      if (!countProduct.text()) {
        countProduct.text(1);
      } else {
        let countProducts = Number(countProduct.text());
        countProducts++;
        countProduct.text(countProducts);
      }
      Flash.success("Product succesfully added to your cart");
    }
  });
}

为什么原来的代码不行？ #

你之前用const cartButton = document.getElementsByClassName('add-to-card-button');拿到的是所有带这个类的按钮的集合，不是单个元素，所以cartButton.dataset.id是不存在的。必须在点击事件的回调里，通过this获取到当前被点击的那个按钮，才能拿到对应的data-id。

另外补充一点：你的代码里countProduct看起来没有提前定义，最好在函数里明确用选择器获取对应的DOM元素，避免出现未定义的报错。

内容的提问来源于stack exchange，提问作者user9127206