Question

我有我的html的这一部分（多个同类型的）：

<div class="this-product">
 <img src="images/bag2.jpeg" alt="">
 <span class="product-name">iPhone</span>
 <span class="product-price">345445</span>
</div>

这部分我的javascript代码旨在获取span标签的innerHTML并为其分配值，如下所示：

var productList = document.querySelectorAll('.this-product');
productList.forEach(function (element) {

    element.addEventListener('click', function (event) {
        var productName = document.getElementsByClassName('product-name')[0].innerHTML;
        var productPrice = document.getElementsByClassName('product-price')[0].innerHTML;
        var cartProductname = event.currentTarget.productName;
        var cartProductprice = event.currentTarget.productPrice;
        var cartContent = '<div class="cart-product"><span class="block">'+cartProductname+'</span><span class="block">'+cartProductprice+'</span></div><div class="cart-result">Total = </div><br>'
        document.getElementById('dashboard-cart').innerHTML += cartContent;
    });
});

一切正常，上面的每个变量的值都显示得很好，除了 cartProductname 和 cartProductprice 都显示为 undefined ，而且vscode告诉我该productName被声明但未被读取。我可能在哪里错了？

Answer 1

您可以使用event.currentTarget.querySelector('.product-name')将元素获取到另一个元素之内

Answer 2

如果我正确理解了您的问题，可以对要迭代的每个产品项元素调用querySelector，如下所示：

var productList = document.querySelectorAll('.this-product');
productList.forEach(function (element) {

    element.addEventListener('click', function (event) {

        // Update these two lines like so:
        var productName = element.querySelector('.product-name').innerHTML;
        var productPrice = element.querySelector('.product-price').innerHTML;

        var cartProductname = productName; // event.currentTarget.productName;
        var cartProductprice = productPrice; // event.currentTarget.productPrice;
        var cartContent = '<div class="cart-product"><span class="block">'+cartProductname+'</span><span class="block">'+cartProductprice+'</span></div><div class="cart-result">Total = </div><br>'
        document.getElementById('dashboard-cart').innerHTML += cartContent;
    });
});

获取currentTarget的子代的innerHTML

2 个答案: