javascript - 获取 currentTarget 的子项的 innerHTML

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

如果我对你的问题的理解正确，你可以像这样在你正在迭代的每个产品项目元素上调用 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;
    });
});