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

Question

如何用纯 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  
    });
}

如果写这个字符串：

document.querySelector ('button.add-to-cart'). addEventListener ('click', addToCart);

该按钮仅通过单击第一个产品卡来捕获事件，但其他产品卡按钮不会捕获按钮单击事件并且不会将商品添加到购物车。

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();
}

Answer 1

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

所以

document.querySelectorAll('button.add-to-cart').forEach(function(but) {
  but.addEventListener("click",addToCart);
})

但您可以改为从容器委托。

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

即

$('#goods').on('click','button.add-to-cart',addToCart); 

变成

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();
}

Answer 2

function addToCart(item) {
    console.log('clicked ' + item.target.getAttribute('data-art'));
}


(function(){
    var buttons = document.querySelectorAll("button.add-to-cart");
    buttons.forEach(function (item, index) {
        item.addEventListener("click", addToCart);
    });
})()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button class="add-to-cart" data-art="aaaa"> buy</button>
<button class="add-to-cart" data-art="bbbb"> buy</button>
<button class="add-to-cart" data-art="cccc"> buy</button>
<button class="add-to-cart" data-art="dddd"> buy</button>