Javascript addeventlistener 點擊多次

Question

下面提到的代碼將在數據列表（圖標列表）中將圖標從已觀看（-）更改為未觀看（+），反之亦然：-

ts代碼：-

const watchListComponent = document.querySelectorAll('.addtoWatchlist');
        if (watchListComponent.length) {
            watchListComponent.forEach((watchItem) => {
                watchItem.addEventListener('click', () => {
                    console.log('here');
                    watchItem.querySelector('.icon').classList.toggle('iconWatched');
                    watchItem.querySelector('.icon').classList.toggle('iconWatchList');
                });
            });
        }

HTML 代碼：-

<div class="px-2">
                          <a href="javascript:void(0)" class="tableInvisibleOption addtoWatchlist tooltipTRWL">
                            <i class="icon icon20 iconWatchList iconShow" (click)="addToWatchList(fundData)"></i>
                            <span class="tooltiptextTRWL">Add to Watchlist</span></a>
                        </div>

在上述情況下，如果我第一次單擊未觀看（+）圖標，它會更改為已觀看（-），例如：-（+）到（-），下一次如果我單擊它應該從（ -) 到 (+) 但圖標沒有改變。 如果我單擊兩次，圖標將從（-）更改為（+），然后如果我單擊兩次，則從（+）更改為（-）。

需要單擊將圖標從 (+) 更改為 (-) 和 (-) 更改為 (+)。

Answer 1

使用事件委托。 為您提供的最小可重現示例

 document.addEventListener("click", toggleAddIcon); function toggleAddIcon(evt) { const origin = evt.target; if (origin.classList.contains("icon")) { origin.classList.toggle('iconWatchList'); } }

 .icon { cursor: pointer; }.icon.iconWatchList:after { content: ' (on list)'; }

 <div class="icon">click</div> <div class="icon">click</div> <div class="icon">click</div>