javascript 数据集属性

Question

我已经在 html 个元素中设置了数据，例如

<button data-product={{ product.id }} data-action="add" class="btn btn-outline-primary add-btn update-cart">Add to Cart</button>

并尝试将它们访问到 js 文件中，例如：

var updateBtns = document.getElementsByClassName('update-cart');

   for(var i=0; i<updateBtns.length; i++){
      updateBtns[i].addEventListener('click', ()=> {
      var action = this.dataset.action;
       var productId = this.dataset.product;
        })  
     }

但我收到错误提示 cart.js:5 Uncaught TypeError: Cannot read 属性 'action' of undefined 在 HTMLButtonElement.

Answer 1

尝试这样的事情

for(var i=0; i<updateBtns.length; i++){
      updateBtns[i].addEventListener('click', (event)=> {
      var action = event.target.dataset.action;
       var productId = event.target.dataset.product;
        })  
     }

Answer 2

如果你用这个这个词，你就不应该用arrow function！

for (var i = 0; i < updateBtns.length; i++) {
  updateBtns[i].addEventListener('click', function(){
    var action = this.dataset.action;
    var productId = this.dataset.product;
  });
}

javascript 数据集属性

javascript data set property

javascript

dataset

ecmascript-6

javascript 数据集 属性

javascript data set property

javascript

dataset

ecmascript-6

javascript 数据集属性