代码之家 › 专栏 › 技术社区 › Eric O.

获取currentTarget子级的innerHTML

javascript

Eric O. · 技术社区 · 8 年前

我有我的html的这一部分(不止一个相同类型):

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

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公司 显示为 未定义

2 回复 | 直到 8 年前

Dacre Denny 8 年前

如果我没弄错你的问题,你可以打电话给我 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;
    });
});

Eugene Tsakh 8 年前

event.currentTarget.querySelector('.product-name') 将元素放入另一个元素中

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前