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>