如何從八個按鈕獲取單擊的添加到購物車按鈕的ID

****這是我的 html 代碼 這只是我有按鈕的 html 代碼的一部分 ****

div id="items">
    <div id="outer-wrapper-1" >
        <div id="inner-wrapper-1" >
            <img src="dryfruits images/badam large.jpg" id="first-img"></img>
            <span id="df-name-1" >BADAM</span><br>
            <span id="price-text-1" >&#8377; <span id="price-num-1" >700</span></span>
            <button id = "add-to-cart-1" ><span id="atc-span-1" >Add To Cart</span></button>
            <button id="remove-items-1" ><span id="remove-span-1" >Remove Items</span></button>
            <p id="1" >Product Added To Cart</p>
        </div>
    </div>
    <div id="outer-wrapper-2" >
        <div id="inner-wrapper-2" >
            <img src="dryfruits images/kaju.jpg" id="second-img"></img>
            <span id="df-name-2" >KAJU</span><br>
            <span id="price-text-2" >&#8377; <span id="price-num-2" >1200</span></span>
            <button id = "add-to-cart-2" ><span id="atc-span-2" >Add To Cart</span></button>
            <button id="remove-items-2" ><span id="remove-span-2" >Remove Items</span></button>
            <p id="2" >Product Added To Cart</p>

        </div>
    </div>
<div id="outer-wrapper-3" >
    <div id="inner-wrapper-3" >
        <img src="dryfruits images/pista.jpg" id="third-img"></img>
        <span id="df-name-3" >PISTA</span><br>
        <span id="price-text-3" >&#8377; <span id="price-num-3" >1300</span></span>
        <button id = "add-to-cart-3" ><span id="atc-span-3" >Add To Cart</span></button>
        <button id="remove-items-3" ><span id="remove-span-3" >Remove Items</span></button>
    </div>
</div>
<div id="outer-wrapper-4" >
    <div id="inner-wrapper-4" >
        <img src="dryfruits images/green raisins.jpg" id="fourth-img"></img>
        <span id="df-name-4" >GREEN RAISINS</span><br>
        <span id="price-text-4" >&#8377; <span id="price-num-4" >550</span></span>
        <button id = "add-to-cart-4" ><span id="atc-span-4" >Add To Cart</span></button>
        <button id="remove-items-4" ><span id="remove-span-4"  >Remove Items</span></button>
    </div>
</div>
<div id="outer-wrapper-5" >
    <div id="inner-wrapper-5" >
        <img src="dryfruits images/black raisins.jpg" id="fifth-img"></img>
        <span id="df-name-5" >BLACK RAISINS</span><br>
        <span id="price-text-5" >&#8377; <span id="price-num-5" >420</span></span>
        <button id = "add-to-cart-5" ><span id="atc-span-5" >Add To Cart</span></button>
        <button id="remove-items-5" ><span id="remove-span-5" >Remove Items</span></button>
    </div>
</div>
<div id="outer-wrapper-6" >
    <div id="inner-wrapper-6" >
        <img src="dryfruits images/walnuts.jpg" id="sixth-img"></img>
        <span id="df-name-6" >CHILE WALNUTS</span><br>
        <span id="price-text-6" >&#8377; <span id="price-num-6" >1400</span></span>
        <button id = "add-to-cart-6" ><span id="atc-span-6" >Add To Cart</span></button>
        <button id="remove-items-6" ><span id="remove-span-6" >Remove Items</span></button>
    </div>
</div>
<div id="outer-wrapper-7" >
    <div id="inner-wrapper-7" >
        <img src="dryfruits images/anjeer.jpg" id="seventh-img"></img>
        <span id="df-name-7" >ANJEER</span><br>
        <span id="price-text-7" >&#8377; <span id="price-num-7" >1000</span></span>
        <button id = "add-to-cart-7" ><span id="atc-span-7" >Add To Cart</span></button>
        <button id="remove-items-7" ><span id="remove-span-7" >Remove Items</span></button>
    </div>
</div>
<div id="outer-wrapper-8" >
    <div id="inner-wrapper-8" >
        <img src="dryfruits images/anjeer.jpg" id="eighth-img"></img>
        <span id="df-name-8" >ANJEER</span><br>
        <span id="price-text-8" >&#8377; <span id="price-num-8" >1000</span></span>
        <button id = "add-to-cart-8" ><span id="atc-span-8" >Add To Cart</span></button>
        <button id="remove-items-8" ><span id="remove-span-8" >Remove Items</span></button>
    </div>
</div>

我有 8 個添加到購物車按鈕如何知道點擊了哪個添加到購物車按鈕。我必須要做的是，如果第二個添加到購物車按鈕被點擊，那么必須在該按鈕下顯示“產品添加到購物車”，如果可能的話，那么我可以添加更多功能我有 8 個添加到購物車按鈕如何知道哪個添加到購物車按鈕被點擊了。我必須要做的是，如果第二個添加到購物車按鈕被點擊，那么必須顯示“如果可能的話，產品已添加到該按鈕下的購物車中，那么我可以添加更多功能， 如果有人可以，請幫忙

uj5u.com熱心網友回復：

您可以通過將事件偵聽器附加到名為“items”的父 div 而不是在每個按鈕上附加單擊事件來使用事件委托。

document.getElementById('items').addEventListener('click', event =>{
    console.log(event.target.id);
});

uj5u.com熱心網友回復：

button.addEventListener('click', event => {
 console.log(event.target.id)
});

標籤：javascript css

上一篇：函式foo和bar的執行順序是什么？

下一篇：如何匯出多個功能Javacript？