為什么 js 單擊除了第一次單擊之外不起作用

Question

我想每次點擊都更改圖標。 此代碼有效但只需先單擊。 第一次點擊后的每次點擊都沒有任何反應。 如果我刪除 if & else 則每次點擊都可以點擊。 問題是什么？

@foreach (var item in Model)
            {
                <div class="item col-lg-4 col-md-6 col-xs-12 landscapes sale" style="padding-right:15px;padding-left:15px;" data-id="@item.Id">
                    <div class="project-single" data-aos="fade-up">
                        <div class="project-inner project-head">
                            <div class="homes">
                                <!-- homes img -->
                                <div href="single-property-1.html" class="homes-img">
                                    <div class="add-favorite">
                                        <i class="far fa-heart"></i>
                                    </div>
                                    @if (item.Document == true)
                                    {
                                        <div class="homes-tag button alt featured">Document</div>
                                    }
                                    
                                    <div class="homes-price">$ @String.Format(new CultureInfo("hr-HR"), "{0:# ##0}", item.Price)</div>
                                    <img src="~/EstateImages/@item.MainImage" alt="home-1" class="img-responsive">
                                </div>
                            </div>
                        </div>
                        <!-- homes content -->
                        
                    </div>
                </div>
            }

     <script type="text/javascript">
       let announcements = document.querySelectorAll(".item")
       let favoriteAnnouncementsText = localStorage.getItem("favorites")
       let favoriteAnnouncements;
        if (favoriteAnnouncementsText != null){
            favoriteAnnouncements = favoriteAnnouncementsText.split("-");
        }
       for (let i = 0; i < announcements.length; i++) {
           
            announcements[i].querySelector(".add-favorite i").addEventListener('click', function(e){
                if (this.getAttribute("class") == "fas fa-heart"){
                    announcements[i].querySelector(".add-favorite").innerHTML = '<i class="far fa-heart"></i>'
                }
                else if (this.getAttribute("class") == "far fa-heart"){
                    announcements[i].querySelector(".add-favorite").innerHTML = '<i class="fas fa-heart"></i>'
                }
            })

       }
    </script>

Answer 1

在您的事件處理程序中，您可以通過設置父元素的.innerHtml屬性來替換為其定義點擊處理程序的元素。 html 片段被解析並集成到 DOM 中，但它不保留與原始元素關聯的事件處理程序定義。

將您的事件處理程序更改為

this.classList.toggle("fas");
this.classList.toggle("far");

這會在每次單擊時切換i元素上的兩個類，這相當於每次單擊時在這些類之間切換。 其他類（即fa-heart ）不受影響。 無需修改 DOM 結構。

參考：

• MDN: Web API - 類列表
• MDN: Web API - DOMTokenList