如何用纯javascript编写这个jquery字符串？

如何用纯javascript编写这个jquery字符串？我用注释标记了字符串

function loadGoods() {
    $.getJSON('goods.json', function (data) {
        var out = '';
        for (var key in data){
            out+='<div class="single-goods">';
            out+='<h3>'+data[key]['name']+'</h3>';
            out+='<img src="'+data[key].image+'">';
            out+='<p>Price: '+data[key]['cost']+'</p>';
            out+='<button class="add-to-cart" data-art=" '+key+' "> buy</button>';
            out+='</div>';
        }
            document.getElementById('goods').innerHTML = out;                        
            $('button.add-to-cart').on('click', addToCart); // this string  
    });
}

该按钮仅通过单击第一张产品卡来捕获事件，但其他产品卡按钮不会捕获按钮单击事件，也不会将项目添加到购物车

addToCart-为了更好地理解，我将在下面编写的函数

函数addToCart:

function addToCart() {
    var articul = this.getAttribute('data-art');       
    if (cart[articul]!=undefined) {                         
        cart[articul]++;
    }
    else {
        cart[articul] = 1;
    }
    localStorage.setItem('cart', JSON.stringify(cart) );
    showMiniCart();
}

---

querySelector将返回集合的第一个，而如果使用正确的选择器，querySelector将返回所有按钮

所以

但是您可以从容器中进行委托

即使在jQuery中，这也是一个好主意，因为按钮是动态添加的

i、 e

变成

document.getElementById('#goods').addEventListener('click', addToCart);

以及功能

function addToCart(e) { 
  var tgt = e.target; 
  if (!tgt.matches("button.add-to-cart")) return;
  var articul = tgt.getAttribute('data-art');       
  if (cart[articul]) cart[articul]++;
  else cart[articul] = 1;
  localStorage.setItem('cart', JSON.stringify(cart) );
  showMiniCart();
}

---

querySelector将返回集合的第一个，而如果使用正确的选择器，querySelector将返回所有按钮

所以

但是您可以从容器中进行委托

即使在jQuery中，这也是一个好主意，因为按钮是动态添加的

i、 e

变成

document.getElementById('#goods').addEventListener('click', addToCart);

以及功能

function addToCart(e) { 
  var tgt = e.target; 
  if (!tgt.matches("button.add-to-cart")) return;
  var articul = tgt.getAttribute('data-art');       
  if (cart[articul]) cart[articul]++;
  else cart[articul] = 1;
  localStorage.setItem('cart', JSON.stringify(cart) );
  showMiniCart();
}

函数addToCart（项）{
console.log（'clicked'+item.target.getAttribute（'data-art'））；
}
（功能（）{
var buttons=document.queryselectoral（“button.add-to-cart”）；
按钮。forEach（功能（项目、索引）{
item.addEventListener（“单击”，addToCart）；
});
})（）

购买
购买
购买
购买

函数addToCart（项）{
console.log（'clicked'+item.target.getAttribute（'data-art'））；
}
（功能（）{
var buttons=document.queryselectoral（“button.add-to-cart”）；
按钮。forEach（功能（项目、索引）{
item.addEventListener（“单击”，addToCart）；
});
})（）

购买
购买
购买
购买

查询选择器

只返回一个元素。使用

querySelectorAll

querySelector

只返回一个元素。使用

querySelectorAll

。这是一个更聪明的答案，但是海报不会知道为什么，除非你告诉他为什么以及这是什么。多对一,，etc@oligofren请看我在你发表评论时写的更新。这是一个更聪明的答案，但除非你告诉他为什么以及这是怎么回事，否则海报不会知道原因。多对一,，etc@oligofren请查看我在您发表评论时编写的更新。您可以在列表中调用addEventListener吗？@mplungjan稍微更改了我的代码以使其更清晰。但是您的解决方案非常优雅：）我的意思是：

item.addEventListener（“单击”，函数（e）{addToCart（this）；}，false）可以写入
项。addEventListener（“单击”，addToCart）@mplungjan哦，我现在明白了。我已经更新了答案。谢谢你的更正：）你能在列表中调用addEventListener吗？@mplungjan稍微修改了我的代码，使之更干净。但是您的解决方案非常优雅：）我的意思是：
item.addEventListener（“单击”，函数（e）{addToCart（this）；}，false）可以写入
项。addEventListener（“单击”，addToCart）@mplungjan哦，我现在明白了。我已经更新了答案。谢谢你的更正：）
function addToCart(e) { 
  var tgt = e.target; 
  if (!tgt.matches("button.add-to-cart")) return;
  var articul = tgt.getAttribute('data-art');       
  if (cart[articul]) cart[articul]++;
  else cart[articul] = 1;
  localStorage.setItem('cart', JSON.stringify(cart) );
  showMiniCart();
}