jquery - 当用户单击级别函数传递值时，jquery claaclled

Question

在我的在线商店页面中，我有几件商品可供用户单击以添加到他们的购物车中。

<a class="btn add2Cart" href="#">Add item 123to Cart</a>
<a class="btn add2Cart" href="#">Add item 456 to Cart</a>

是否可以在每次单击项目时创建一个调用的单个 jquery 函数，并将项目代码作为值传递？

$('.add2Cart').click(function() { *** How do I get the item value here? ***}

Answer 1

是的！

你能改变HTML吗？如果你能做到：

<a class="btn add2Cart" data-product-number="123" href="#">Add item 123to Cart</a>
<a class="btn add2Cart" data-product-number="456" href="#">Add item 456 to Cart</a>

然后你就可以使用：

$('.add2Cart').click(function() {
  var productNumber = $(this).attr('data-product-number');

  // add to the cart using productNumber

}

如果您通常通过单击链接将产品添加到购物车，您可能可以进行 ajax 调用将您的产品添加到购物车，如下所示：

$('.add2Cart').click(function() {
  var productNumber = $(this).attr('data-product-number');

  // add to the cart using productNumber
  $.ajax({
    url: '/path/to/cart',
    data: {
      'product_id' : productNumber
    },
    success: function(){
      console.log('Product number '+productNumber+' was added to the cart.');
    }
  });

}