时间戳

首页 > 解决方案 > 除了第一个按钮外，单击事件不适用于相同的类按钮

javascript - 除了第一个按钮外，单击事件不适用于相同的类按钮

问题描述

我正在创建商店应用程序，并且在每个产品都添加到购物车 btn 之后。当我尝试使用该 btn 触发单击事件时，它适用于第一个产品，但不适用于其他产品按钮。数据来自芒果，我在上面使用了哈巴狗。我检查了很多次所有产品按钮都具有相同的类别。

这是html和pug代码

<ul class="posts">
    <li class="posts_list">
        <div class="posts_list-box1">
            <a class="posts_list-box1-link" href="/theme/space-journey-theme"><img class="posts_list-box1-img" src="./img/4.png" alt="Space Journey Theme"></a>
        </div>
        <div class="posts_list-box2">
            <h1 class="posts_list-box2-name">Space Journey Theme</h1>
            <h3 class="posts_list-box2-author">by Crippy Themes </h3></div>
        <div class="posts_list-box3">
            <button class="btn-small btn-small_full" href="/theme/space-journey-theme">More Details</button>
            <button class="btn-small btn-small_outline cartBtn" data-id="5e3691dcbd2e3745386aa470">Add to Cart</button>
            <h4 class="posts_list-box3-price">$59</h4></div>
    </li>
    <li class="posts_list">
        <div class="posts_list-box1">
            <a class="posts_list-box1-link" href="/theme/business-enterpreneur-protfolio"><img class="posts_list-box1-img" src="./img/1.png" alt="Business | Enterpreneur Protfolio"></a>
        </div>
        <div class="posts_list-box2">
            <h1 class="posts_list-box2-name">Business | Enterpreneur Protfolio</h1>
            <h3 class="posts_list-box2-author">by Crippy Themes </h3></div>
        <div class="posts_list-box3">
            <button class="btn-small btn-small_full" href="/theme/business-enterpreneur-protfolio">More Details</button>
            <button class="btn-small btn-small_outline cartBtn" data-id="5e3695546dc5fd456c7c7726">Add to Cart</button>
            <h4 class="posts_list-box3-price">$29</h4></div>
    </li>
</ul>
哈巴狗代码

ul.posts
    each data in theme
      li.posts_list
        .posts_list-box1
          a.posts_list-box1-link(href=`/theme/${data.slug}`)
            img.posts_list-box1-img(src=`./img/${data.mainImg}` alt=`${data.name}`)
        .posts_list-box2
          h1.posts_list-box2-name=data.name
          h3.posts_list-box2-author by Crippy Themes 
        .posts_list-box3
          button.btn-small.btn-small_full(href=`/theme/${data.slug}`) More Details
          button.btn-small.btn-small_outline.cartBtn( data-id=`${data._id}`) Add to Cart
          h4.posts_list-box3-price= `$${data.price}

Javascript代码

document.querySelector('.cartBtn').addEventListener('click', () => {
        console.log('clicked');
        document.querySelector('.bucket').setAttribute('style', ' opacity: 1; visibility: visible; transform: translateY(0)');
    })

标签： javascripthtml

解决方案

您必须将点击事件分配给所有button.cartBtn元素，而不仅仅是第一个元素。 querySelector()返回第一个匹配元素，而querySelectorAll()返回 a NodeList。

for(var tL=document.querySelectorAll('.cartBtn'), i=0, j=tL.length; i<j; i++){
    tL[i].addEventListener('click', () => {
        console.log('clicked');
        document.querySelector('.bucket').setAttribute('style', ' opacity: 1; visibility: visible; transform: translateY(0)');
    })
};

推荐阅读