Question

我想获取点击按钮的数据属性值。当我提交ajax表单时，我需要使用它。我怎么能得到它？

我的按钮（按钮数量与产品数量一样多）

<input value="Add To Cart" type="button" class="btn btn-success btn-sm btn-block add-to-card-button" data-id="{{$product->id}}" style="margin-bottom:10px">

Javascript代码;

const cartButton = document.getElementsByClassName('add-to-card-button');

if (cartButton) {
    Array.from(cartButton).forEach(function(element) {
        element.addEventListener('click', addToCard);
    });
   }

function addToCard() {

    $.ajax({
        url: "/auth/check",
        context: document.body,
        success: function(status){
           if (status === "Auth")
           {
               addToCardForUsers();
           } else {
               addToCardForGuests()
           }
        }
    });

}

function addToCardForUsers() {

    $.ajax({
        type: 'POST',
        url: "/cart/add-product/"+ cartButton.dataset.id,
        context: document.body,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(){
                if(countProduct.text() == null) {
                    countProduct.text(1);
                } else {
                    countProducts =  Number(countProduct.text());
                    countProducts++;
                    countProduct.text(countProducts);
                }              
                Flash.success("Product succesfully added to your cart");
        }
    });
}

Answer 1

<input value="Add To Cart" type="button" class="btn btn-success btn-sm btn-block add-to-card-button" data-id="{{$product->id}}" style="margin-bottom:10px">

要从按钮点击事件上面的代码中获取data-id属性值：

$(this).data('id')

JSFiddler演示：https://jsfiddle.net/682xdbkv/1/

Answer 2

更改将事件列表器绑定到此的方式，

$('.add-to-card-button').on('click', function () {
    addToCard();
    alert($(this).data('id'));
});

Answer 3

您应该使用：

function addToCard(e) {
    alert($(e.target).data('id'))
}

Answer 4

您可以做的是抓取addToCart中的ID并将其作为参数传递给addToCardForUsers，您可以在端点字符串中使用它。既然你正在使用jQuery，也许可以使用它来获取按钮并在click事件中为它们分配函数。

$('add-to-card-button').on('click', addToCart);

function addToCard() {
  const id = $(this).data('id');
  $.ajax({
    url: "/auth/check",
    context: document.body,
    success: function(status) {
      if (status === "Auth") {
        addToCardForUsers(id);
      } else {
        addToCardForGuests()
      }
    }
  });
}

function addToCardForUsers(id) {
  $.ajax({
    type: 'POST',
    url: "/cart/add-product/" + id,
    ...
  });
}

如何获取点击按钮的数据属性值？

4 个答案: